/**
 * UbatubaOn — tourist mobile UX (nav, chrome, home, CTAs)
 * Cascading rules for phones / small tablets after breakpoint fix (≤699px).
 */

/* Skip link */
.uo-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 16px;
  background: #00aac8;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.uo-skip-link:focus {
  left: 12px;
  top: 12px;
}

/* Menu button reset (was <a>, now <button>) */
#header #button-menu.open-menu {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-size: 0;
  color: transparent;
  text-indent: -9999px;
  /* overflow:hidden cortava o ícone :before no topo do header */
  overflow: visible;
}

#header #button-menu.open-menu:focus {
  outline: 2px solid #00aac8;
  outline-offset: 2px;
}

/* Menu backdrop */
.menu-backdrop {
  display: none;
}

body.open-menu {
  overflow: hidden;
}

@media only screen and (max-width: 1023px) {
  body.open-menu .menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 990;
    background: rgba(8, 25, 35, 0.45);
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }

  body.open-menu #header,
  body.open-menu #header .content-width #block-system-main-menu,
  body.open-menu nav.block-menu {
    z-index: 1000;
  }
}

/* Bottom intent nav — oculto no desktop; só monta o chrome em ≤699px.
   Evita vazar display:flex no desktop se a agregação de CSS reordenar media queries. */
.uo-bottom-nav {
  display: none;
}

@media only screen and (max-width: 699px) {
  .uo-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100050;
    height: 56px;
    min-height: 56px;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing: content-box;
    background: #08414d;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -4px 16px rgba(8, 25, 35, 0.28);
    justify-content: space-around;
    align-items: stretch;
    width: 100%;
    max-width: 100vw;
    margin: 0;
  }
}

/* Shared marketplace cards — lodging + things to do. */
.uo-listing-card,
.uo-listing-card * {
  box-sizing: border-box;
}

#page #content .view-hospedagem .view-content ul li.uo-marketplace-row,
#page #content .view-servi-os .view-content ul li.uo-marketplace-row {
  overflow: visible;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none;
}

.uo-listing-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0 0 12px;
  overflow: hidden;
  border: 1px solid rgba(8, 65, 77, 0.09);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(8, 25, 35, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.uo-listing-card:hover,
.uo-listing-card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(8, 25, 35, 0.14);
}

/* Hidden Views fields kept for beach-page map markers. */
.uo-map-payload {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Soften legacy beach listing chrome so marketplace cards win. */
body.node-type-praia #page #content .view-servi-os,
body.node-type-praia #page #content #block-views-hospedagem-block-3 .view-hospedagem {
  background: transparent;
  padding: 0;
}

body.node-type-praia #page #content .view-servi-os ul li,
body.node-type-praia #page #content .view-hospedagem ul li {
  position: relative;
  box-shadow: none !important;
}

.uo-listing-card__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: auto;
  min-height: 0;
  color: #08414d !important;
  text-decoration: none !important;
}

.uo-listing-card__link:focus-visible {
  outline: 3px solid #00aac8;
  outline-offset: -3px;
}

.uo-listing-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  height: 220px;
  aspect-ratio: 16 / 10;
  background: #e8f1f3;
}

@supports (aspect-ratio: 16 / 10) {
  .uo-listing-card__media {
    height: auto;
  }
}

.uo-listing-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.uo-listing-card:hover .uo-listing-card__media img {
  transform: scale(1.025);
}

.uo-listing-card__rating {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #08414d;
  box-shadow: 0 2px 8px rgba(8, 25, 35, 0.18);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.uo-listing-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 15px 16px;
}

.uo-listing-card__category {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0 0 7px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0, 170, 200, 0.1);
  color: #08758a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.uo-listing-card__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 5px;
  color: #082f38;
  font-family: inherit;
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 800;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.uo-listing-card__location {
  display: block;
  margin: 0 0 10px;
  color: #526970;
  font-size: 13px;
  line-height: 1.35;
}

.uo-listing-card__location:before {
  content: "⌖";
  margin-right: 5px;
  color: #00aac8;
  font-weight: 800;
}

.uo-listing-card__price {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  color: #08414d;
  font-size: 14px;
  line-height: 1.35;
}

.uo-listing-card__price small {
  margin-top: 2px;
  color: #65777c;
  font-size: 11px;
}

.uo-listing-card__action {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-top: 12px;
  padding: 8px 13px;
  border-radius: 9px;
  background: #00aac8;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.uo-listing-card__action:after {
  content: "→";
  margin-left: 7px;
}

.uo-results-heading {
  margin: 0 0 18px;
}

.uo-results-heading h2 {
  margin: 0 0 4px;
  color: #08414d;
  font-size: clamp(21px, 2.2vw, 29px);
  line-height: 1.2;
}

.uo-results-heading p {
  margin: 0;
  color: #526970;
  font-size: 14px;
  line-height: 1.45;
}

.uo-listing-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(360px, calc(100% - 32px));
  min-height: 46px;
  margin: 20px auto 32px;
  padding: 11px 16px;
  border: 1px solid #00aac8;
  border-radius: 10px;
  background: #fff;
  color: #08758a;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.uo-listing-more:hover,
.uo-listing-more:focus-visible {
  background: #00aac8;
  color: #fff;
}

.uo-category-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid rgba(8, 65, 77, 0.2);
  border-radius: 999px;
  background: #fff;
  color: #08414d;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.page-servicos .view-menu-taxonomia-nodes .uo-category-toggle,
.page-servicos .uo-category-toggle-item .uo-category-toggle {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
  padding: 0.35rem 0.85rem;
  background: #f4f8f9;
  border-color: rgba(8, 65, 77, 0.12);
  font-size: 1.1rem;
}

/* Detail decision summary, gallery actions and related listings. */
.uo-detail-summary {
  box-sizing: border-box;
}

.uo-detail-summary__body {
  box-sizing: border-box;
}

.uo-detail-summary .nome {
  margin-bottom: 8px !important;
  color: #082f38;
  line-height: 1.15;
}

.uo-detail-summary .praia-hospedagem {
  display: inline-flex;
  align-items: center;
  color: #08758a !important;
  font-weight: 700;
  text-decoration: none !important;
}

.uo-detail-summary .praia-hospedagem:before {
  content: "⌖";
  margin-right: 6px;
  color: #00aac8;
}

.uo-detail-summary__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.uo-detail-summary__rating,
.uo-detail-summary__price,
.uo-detail-summary__category {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef7f8;
  color: #08414d;
  font-size: 12px;
  font-weight: 800;
}

.uo-detail-summary__price {
  background: rgba(0, 170, 200, 0.11);
  color: #08758a;
}

.uo-listing-updated--confirm {
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff7df;
  color: #705516 !important;
  line-height: 1.4;
}

.uo-gallery-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 10px 0 0;
  padding: 9px 14px;
  border: 1px solid rgba(8, 65, 77, 0.2);
  border-radius: 9px;
  background: #fff;
  color: #08414d;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.uo-gallery-lightbox {
  position: fixed;
  z-index: 100100;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 54px 16px 28px;
  background: rgba(3, 17, 21, 0.96);
}

.uo-gallery-lightbox__close {
  position: absolute;
  z-index: 3;
  top: max(12px, env(safe-area-inset-top));
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.uo-gallery-lightbox__content,
.uo-gallery-lightbox .flexslider {
  width: min(100%, 1100px);
  margin: 0;
  border: 0;
  background: transparent;
}

.uo-gallery-lightbox .slides img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 100px);
  margin: 0 auto;
  object-fit: contain;
}

.uo-gallery-lightbox .flex-control-nav {
  bottom: -24px;
}

.uo-gallery-lightbox .flex-control-paging li a {
  background: rgba(255, 255, 255, 0.45);
}

.uo-gallery-lightbox .flex-control-paging li a.flex-active {
  background: #00aac8;
}

body.uo-gallery-is-open {
  overflow: hidden;
}

.uo-map-route {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 9px;
  background: #08414d;
  color: #fff !important;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none !important;
}

.uo-related-listings {
  clear: both;
  box-sizing: border-box;
  width: min(1180px, 92%);
  margin: 2rem auto;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(8, 65, 77, 0.12);
}

.uo-related-listings h2 {
  margin: 0 0 1rem;
  color: #08414d;
  font-size: clamp(20px, 2vw, 27px);
}

.uo-related-listings__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uo-related-listings__list li {
  min-width: 0;
}

.uo-related-listings__list a {
  display: block;
  overflow: hidden;
  height: 100%;
  border: 1px solid rgba(8, 65, 77, 0.1);
  border-radius: 12px;
  background: #fff;
  color: #08414d !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(8, 25, 35, 0.07);
}

.uo-related-listings__media {
  display: block;
  height: 160px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e8f1f3;
}

@supports (aspect-ratio: 16 / 10) {
  .uo-related-listings__media {
    height: auto;
  }
}

.uo-related-listings__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uo-related-listings__body {
  display: block;
  padding: 12px;
}

.uo-related-listings__body strong {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.uo-related-listings__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 7px;
  color: #526970;
  font-size: 12px;
}

.uo-lodging-parent-link {
  display: inline-flex;
  margin-bottom: 10px;
  color: #08758a !important;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none !important;
}

.uo-lodging-units {
  clear: both;
  scroll-margin-top: 96px;
  margin: 26px 0 32px;
  padding: 24px;
  border-radius: 16px;
  background: #eef7f8;
}

.uo-lodging-units__heading > span {
  color: #08758a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.uo-lodging-units__heading h2 {
  margin: 3px 0 4px;
  color: #082f38;
  font-size: clamp(22px, 2.2vw, 30px);
}

.uo-lodging-units__heading p {
  margin: 0 0 18px !important;
  color: #526970 !important;
}

.uo-lodging-units__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.uo-lodging-unit {
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(8, 65, 77, 0.11);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(8, 25, 35, 0.07);
}

.uo-lodging-unit__main {
  display: block;
  color: #082f38 !important;
  text-decoration: none !important;
}

.uo-lodging-unit__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #dcecef;
}

.uo-lodging-unit__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uo-lodging-unit__body {
  display: block;
  padding: 13px 14px 10px;
}

.uo-lodging-unit__body strong,
.uo-lodging-unit__facts,
.uo-lodging-unit__price {
  display: block;
}

.uo-lodging-unit__body strong {
  font-size: 17px;
  line-height: 1.25;
}

.uo-lodging-unit__facts {
  margin-top: 6px;
  color: #526970;
  font-size: 12px;
}

.uo-lodging-unit__price {
  margin-top: 8px;
  color: #08758a;
  font-size: 13px;
  font-weight: 800;
}

.uo-lodging-unit__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 0 14px 14px;
}

.uo-lodging-unit__actions > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px;
  border: 1px solid #00aac8;
  border-radius: 8px;
  color: #08758a !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
}

.uo-lodging-unit__actions .uo-lodging-unit__book {
  background: #087f74;
  border-color: #087f74;
  color: #fff !important;
}

.uo-map-heading {
  margin-bottom: 12px;
}

.uo-map-heading h2 {
  margin: 0 0 4px;
  color: #08414d;
  font-size: 24px;
}

.uo-map-heading p {
  margin: 0 !important;
  color: #526970 !important;
}

@media only screen and (max-width: 699px) {
  /* Keep item styles scoped; bar itself is mobile-first above */

  .uo-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 6px 2px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 600;
  }

  .uo-bottom-nav__item.is-active {
    color: #5fd4ea;
  }

  .uo-bottom-nav__icon {
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.85;
  }

  .uo-bottom-nav__item.is-active .uo-bottom-nav__icon {
    opacity: 1;
  }

  .uo-bottom-nav__icon--home {
    background-image: url(../images/menu-icon-home.png);
  }

  .uo-bottom-nav__icon--praias {
    background-image: url(../images/menu-icon-praias.png);
  }

  .uo-bottom-nav__icon--hospedagem {
    background-image: url(../images/menu-icon-hospedagem.png);
  }

  .uo-bottom-nav__icon--servicos {
    background-image: url(../images/menu-icon-servicos.png);
  }

  .uo-bottom-nav__icon--eventos,
  .uo-bottom-nav__icon--agenda {
    background-image: url(../images/menu-icon-calendario.png);
  }

  .uo-bottom-nav__icon--planejar {
    background-image: url(../images/menu-icon-calendario.png);
  }

  .uo-bottom-nav__icon--mapa {
    background-image: url(../images/menu-icon-mapa.png);
  }

  .uo-bottom-nav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 8px;
    letter-spacing: -0.02em;
  }

  /* Hide bottom nav on advertiser / admin-like screens */
  body.page-minha-conta .uo-bottom-nav,
  body.page-acesso-interno .uo-bottom-nav,
  body.page-admin .uo-bottom-nav,
  body.page-user .uo-bottom-nav,
  body.page-node-edit .uo-bottom-nav,
  body.page-node-add .uo-bottom-nav {
    display: none;
  }

  /* Room for bottom nav + FABs */
  body #page {
    padding-bottom: 72px;
  }

  #footer #block-gw2d-gw2d-footer .footer-block .btn-topo {
    bottom: 72px;
    right: 12px;
    width: 44px;
    height: 44px;
    font-size: 0;
  }

  /*
   * Footer menus: desktop uses height:220px + row wrap (~3 cols).
   * On mobile that crushes full-width links — force 1 column with breathing room.
   */
  #footer .footer-block .box-footer#info-footer,
  #footer .footer-block .box-footer#menu-footer,
  #footer .footer-block .box-footer#menu-footer-2 {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 1.25rem;
    box-sizing: border-box;
  }

  #footer .footer-block ul.menu,
  #footer .block-content ul.menu,
  #footer #block-gw2d-gw2d-footer .footer-block #menu-footer ul.menu,
  #footer #block-gw2d-gw2d-footer .footer-block #menu-footer-2 ul.menu,
  #footer #menu-footer ul,
  #footer #menu-footer-2 ul {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #footer .content-width ul.menu > li,
  #footer #block-gw2d-gw2d-footer .footer-block #menu-footer ul.menu > li,
  #footer #block-gw2d-gw2d-footer .footer-block #menu-footer-2 ul.menu > li,
  #footer #menu-footer ul > li,
  #footer #menu-footer-2 ul > li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
    box-sizing: border-box;
  }

  #footer .content-width ul.menu > li > a,
  #footer #block-gw2d-gw2d-footer .footer-block #menu-footer ul.menu > li > a,
  #footer #block-gw2d-gw2d-footer .footer-block #menu-footer-2 ul.menu > li > a,
  #footer #menu-footer ul > li > a,
  #footer #menu-footer-2 ul > li > a {
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0 !important;
    padding: 10px 8px !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.35 !important;
    text-align: center;
  }

  /* Aproxima o 2º menu do footer-block (legado usa padding: 5vw 0). */
  #footer #block-gw2d-gw2d-footer .footer-block {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #footer #block-gw2d-gw2d-footer .footer-block .box-footer#menu-footer {
    margin-bottom: 0.5rem !important;
  }

  #footer #block-menu-menu-menu-footer-2,
  #footer #block-menu-menu-especialidades-footer {
    margin-top: 0 !important;
    margin-left: 0 !important;
    padding: 0.5rem 0 0.75rem !important;
    width: 100% !important;
  }

  /* WhatsApp / reserva / pedido — sticky action bar on detail pages */
  #page .uo-cta-bar,
  .uo-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 100040;
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 10px 10px;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(8, 65, 77, 0.12);
    box-shadow: 0 -6px 20px rgba(8, 25, 35, 0.1);
  }

  #page .uo-cta-bar .botao-whatsapp,
  #page .uo-cta-bar .botao-reserva,
  #page .uo-cta-bar .botao-pedido,
  #page .uo-cta-bar .uo-itinerary-add,
  .uo-cta-bar .botao-whatsapp,
  .uo-cta-bar .botao-reserva,
  .uo-cta-bar .botao-pedido,
  .uo-cta-bar .uo-itinerary-add {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    min-height: 48px;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 5px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em;
    text-align: center;
    border-radius: 10px;
    text-decoration: none !important;
    font-weight: 700;
    box-sizing: border-box;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  /* Order: orçamento/reserva | WhatsApp (center) | roteiro */
  #page .uo-cta-bar .botao-reserva,
  #page .uo-cta-bar .botao-pedido,
  .uo-cta-bar .botao-reserva,
  .uo-cta-bar .botao-pedido {
    order: 1;
    background: #00aac8 !important;
    color: #fff !important;
    border: 0 !important;
  }

  #page .uo-cta-bar .botao-whatsapp,
  .uo-cta-bar .botao-whatsapp {
    order: 2;
    background: #25d366 !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  #page .uo-cta-bar .botao-whatsapp:before,
  .uo-cta-bar .botao-whatsapp:before {
    display: none !important;
    content: none !important;
  }

  #page .uo-cta-bar .uo-itinerary-add,
  .uo-cta-bar .uo-itinerary-add {
    order: 3;
    background: #00aac8 !important;
    /* Base .uo-itinerary-add uses color:#00aac8 !important — force visible white on teal. */
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #page .uo-cta-bar .uo-praia-map-cta,
  .uo-cta-bar .uo-praia-map-cta {
    position: static !important;
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    min-height: 48px;
    margin: 0;
    padding: 8px 5px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-align: center;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    box-sizing: border-box;
    background: #08414d;
    color: #fff;
    display: flex !important;
    align-items: center;
    justify-content: center;
    white-space: normal !important;
  }

  body.node-type-hospedagem #page,
  body.node-type-servicos #page,
  body.node-type-praia #page {
    padding-bottom: calc(56px + 72px + env(safe-area-inset-bottom, 0px));
  }

  /* Nas fichas o assistente nao e mais escondido: a dock sobe acima da barra
     de CTA fixa (56px) e da bottom nav (56px), e chega recolhida. */
  body.node-type-hospedagem .uo-dock,
  body.node-type-servicos .uo-dock,
  body.node-type-praia .uo-dock {
    --uo-dock-bottom: calc(112px + env(safe-area-inset-bottom, 0px) + 8px);
  }

  /* Detail gallery — smaller thumbs, clearer swipe target */
  .galeria-wrapper .flexslider {
    margin-bottom: 8px;
  }

  .galeria-wrapper .flexslider .slides img {
    width: 100%;
    height: auto;
    max-height: 56vh;
    object-fit: cover;
    border-radius: 10px;
  }

  .galeria-wrapper .flexslider-carousel ul li {
    width: 72px !important;
    margin-right: 6px;
  }

  .galeria-wrapper .flexslider-carousel ul li img,
  .galeria-wrapper .flexslider-carousel .block-imgs img {
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 6px;
  }

  /* Praia: capa inside summary card (same pattern as hospedagem/servicos). */
  body.node-type-praia #page #content .node-praia .uo-detail-summary,
  body.node-type-praia .uo-detail-summary {
    box-sizing: border-box;
    width: calc(100% - 8vw) !important;
    max-width: none;
    float: none !important;
    margin: 4vw !important;
    padding: 0 !important;
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(8, 25, 35, 0.12);
  }

  body.node-type-praia #page #content .uo-detail-summary .hospedagem-capa,
  body.node-type-praia #page #content .uo-detail-summary .uo-praia-capa,
  body.node-type-praia .uo-detail-summary .uo-praia-capa {
    position: relative;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    max-height: 240px;
    background: #e8f1f3;
  }

  body.node-type-praia #page #content .uo-detail-summary .uo-praia-capa > a,
  body.node-type-praia #page #content .uo-detail-summary .hospedagem-capa > a,
  body.node-type-praia .uo-detail-summary .uo-praia-capa > a {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  body.node-type-praia #page #content .uo-detail-summary .hospedagem-capa img,
  body.node-type-praia #page #content .uo-detail-summary .uo-praia-capa img,
  body.node-type-praia .uo-detail-summary .uo-praia-capa img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  body.node-type-praia #page #content .uo-detail-summary .uo-detail-summary__body,
  body.node-type-praia .uo-detail-summary .uo-detail-summary__body {
    box-sizing: border-box;
    width: 100% !important;
    float: none !important;
    margin: 0;
    padding: 16px !important;
    background: #fff;
  }

  /* Legacy absolute gallery killed — thumbs live in main column. */
  body.node-type-praia #page #content .node-praia .praia-img,
  body.node-type-praia #page #content .node-praia .uo-praia-thumbs {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    left: auto !important;
    top: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    background: transparent;
  }

  body.node-type-praia #page #content .node-praia .uo-praia-thumbs a.modal-link {
    display: block !important;
    float: none !important;
    width: 100% !important;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
  }

  body.node-type-praia #page #content .node-praia .uo-praia-thumbs img {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  /* Sidebar CTAs: hide chrome on mobile; keep sticky action bar. */
  body.node-type-praia #informacoes-praia-acao {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.node-type-praia #informacoes-praia-acao > h2,
  body.node-type-praia #informacoes-praia-acao .uo-praia-acao__facts,
  body.node-type-praia #informacoes-praia-acao .uo-praia-acao__hint {
    display: none !important;
  }

  /* Hospedagem / serviços: capa lives inside the summary card. */
  body.node-type-hospedagem #page #content .node-hospedagem .uo-detail-summary,
  body.node-type-hospedagem #page #content .node-hospedagem .bloco-titulo.uo-detail-summary,
  body.node-type-servicos #page #content .node-hospedagem .uo-detail-summary {
    box-sizing: border-box;
    width: calc(100% - 8vw) !important;
    max-width: none;
    float: none !important;
    margin: 4vw !important;
    padding: 0 !important;
    position: relative;
    z-index: 2;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(8, 25, 35, 0.12);
  }

  body.node-type-hospedagem #page #content .uo-detail-summary .hospedagem-capa,
  body.node-type-servicos #page #content .uo-detail-summary .hospedagem-capa {
    position: relative;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    overflow: hidden;
  }

  body.node-type-hospedagem #page #content .uo-detail-summary .hospedagem-capa img,
  body.node-type-servicos #page #content .uo-detail-summary .hospedagem-capa img {
    display: block !important;
    width: 100% !important;
    height: 52vw !important;
    max-height: 280px;
    object-fit: cover;
  }

  body.node-type-hospedagem #page #content .uo-detail-summary .uo-detail-summary__body,
  body.node-type-servicos #page #content .uo-detail-summary .uo-detail-summary__body {
    box-sizing: border-box;
    width: 100% !important;
    float: none !important;
    margin: 0;
    padding: 16px !important;
    background: #fff;
  }

  body.node-type-praia .uo-detail-summary .nota-media {
    display: none !important;
  }

  body.node-type-hospedagem .hospedagem-capa .uo-rating-box,
  body.node-type-hospedagem .hospedagem-capa .uo-price-box,
  body.node-type-servicos .hospedagem-capa .uo-rating-box,
  body.node-type-praia .uo-praia-capa .uo-rating-box {
    display: none !important;
  }

  body.node-type-hospedagem .hospedagem-capa .uo-verified-box,
  body.node-type-servicos .hospedagem-capa .uo-verified-box {
    display: block !important;
    top: 10px !important;
    right: 10px !important;
  }

  body.node-type-hospedagem .hospedagem-capa .uo-verified-seal,
  body.node-type-servicos .hospedagem-capa .uo-verified-seal {
    width: 38px;
    height: 38px;
  }

  body.node-type-hospedagem .uo-detail-summary .nome,
  body.node-type-servicos .uo-detail-summary .nome,
  body.node-type-praia .uo-detail-summary .nome {
    margin: 0 0 8px !important;
    font-size: clamp(22px, 6vw, 28px) !important;
  }

  body.node-type-hospedagem .uo-detail-summary .uo-listing-updated,
  body.node-type-servicos .uo-detail-summary .uo-listing-updated,
  body.node-type-praia .uo-detail-summary .uo-listing-updated {
    margin: 8px 0 0;
  }

  body.node-type-hospedagem .uo-detail-summary .informacoes-gerais-cabecalho,
  body.node-type-hospedagem .uo-detail-summary .informacoes-basicas {
    width: 100% !important;
  }

  body.node-type-hospedagem .uo-detail-summary .informacoes-basicas {
    display: flex !important;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0 0 !important;
  }

  body.node-type-hospedagem .uo-detail-summary .informacoes-basicas > div {
    float: none !important;
    width: auto !important;
    min-height: 32px;
    margin: 0 !important;
    padding: 6px 9px !important;
    border-radius: 999px;
    background: #f2f7f8;
  }

  body.node-type-hospedagem .uo-detail-summary .informacoes-basicas label {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .uo-detail-description {
    position: relative;
    overflow: hidden;
  }

  .uo-detail-description.is-collapsed {
    max-height: 210px;
  }

  .uo-detail-description.is-collapsed:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 58px;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
  }

  .uo-description-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    margin: 8px 0 18px;
    padding: 8px 13px;
    border: 1px solid rgba(8, 65, 77, 0.18);
    border-radius: 9px;
    background: #fff;
    color: #08414d;
    font-size: 14px;
    font-weight: 800;
  }

  .uo-detail-accordion {
    margin: 0 0 10px;
    border: 1px solid rgba(8, 65, 77, 0.12);
    border-radius: 12px;
    background: #fff;
  }

  .uo-detail-accordion__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    color: #08414d;
    font-size: 16px;
    font-weight: 800;
    text-align: left;
  }

  .uo-detail-accordion__toggle:after {
    content: "+";
    font-size: 23px;
    font-weight: 500;
  }

  .uo-detail-accordion.is-open .uo-detail-accordion__toggle:after {
    content: "−";
  }

  .uo-detail-accordion__content {
    padding: 0 14px 14px;
  }

  .uo-detail-accordion__content > * {
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  .uo-detail-accordion__content > *:last-child {
    margin-bottom: 0 !important;
  }

  body.node-type-hospedagem #informacoes-servicos,
  body.node-type-servicos #informacoes-servicos {
    margin-top: 20px;
    padding-bottom: 16px;
    border-top: 1px solid rgba(8, 65, 77, 0.12);
  }

  body.node-type-hospedagem #informacoes-servicos #informacoes-proprietario,
  body.node-type-servicos #informacoes-servicos #informacoes-proprietario {
    float: none !important;
    box-sizing: border-box;
    width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 16px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(8, 65, 77, 0.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.node-type-hospedagem #informacoes-servicos #informacoes-proprietario h4,
  body.node-type-servicos #informacoes-servicos #informacoes-proprietario h4 {
    margin: 0 0 10px !important;
    font-size: 15px !important;
  }

  body.node-type-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario .form-item,
  body.node-type-servicos #informacoes-servicos #informacoes-proprietario .form-proprietario .form-item,
  body.node-type-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario .webform-component--celular,
  body.node-type-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario .webform-component--telefone,
  body.node-type-servicos #informacoes-servicos #informacoes-proprietario .form-proprietario .webform-component--celular,
  body.node-type-servicos #informacoes-servicos #informacoes-proprietario .form-proprietario .webform-component--telefone {
    display: block !important;
    float: none !important;
    width: 100% !important;
  }

  body.node-type-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario textarea,
  body.node-type-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario input,
  body.node-type-servicos #informacoes-servicos #informacoes-proprietario .form-proprietario textarea,
  body.node-type-servicos #informacoes-servicos #informacoes-proprietario .form-proprietario input {
    box-sizing: border-box;
    width: 100% !important;
    font-size: 14px !important;
  }

  body.node-type-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario fieldset.captcha,
  body.node-type-servicos #informacoes-servicos #informacoes-proprietario .form-proprietario fieldset.captcha {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    overflow-x: auto;
  }

  body.node-type-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario fieldset.captcha textarea,
  body.node-type-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario fieldset.captcha input,
  body.node-type-servicos #informacoes-servicos #informacoes-proprietario .form-proprietario fieldset.captcha textarea,
  body.node-type-servicos #informacoes-servicos #informacoes-proprietario .form-proprietario fieldset.captcha input {
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .uo-contact-form-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 10px 0;
    padding: 10px 14px;
    border: 1px solid #00aac8;
    border-radius: 9px;
    background: #fff;
    color: #08758a;
    font-size: 14px;
    font-weight: 800;
  }

  #mapa-pagina-wrapper .uo-map-route {
    width: 100%;
    box-sizing: border-box;
  }

  .uo-related-listings {
    width: 100%;
    margin: 1.5rem 0;
    padding: 1.25rem 4vw;
  }

  .uo-related-listings__list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 0 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .uo-related-listings__list::-webkit-scrollbar {
    display: none;
  }

  .uo-related-listings__list li {
    flex: 0 0 76vw;
    scroll-snap-align: start;
  }

  .uo-lodging-units {
    margin: 20px 0 26px;
    padding: 18px 14px;
    border-radius: 13px;
  }

  .uo-lodging-units__grid {
    grid-template-columns: 1fr;
  }

  .uo-lodging-unit__actions {
    grid-template-columns: 1fr;
  }

  /* Home planner hero + city status */
  .uo-home-hero {
    padding: 0 4vw 4vw;
  }

  .uo-home-hero__title {
    margin: 0 0 10px;
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.2 !important;
    text-align: center;
  }

  .uo-home-hero__lead {
    margin: 0 auto;
    max-width: 36em;
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.45;
    text-align: center;
  }

  .uo-home-hero__shortcuts ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }

  .uo-home-hero__chip {
    display: inline-block;
    padding: 10px 14px;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid rgba(8, 65, 77, 0.18);
    border-radius: 999px;
    background: #fff;
    color: #08414d !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
  }

  .uo-city-status {
    margin: 3vw 0;
    padding: 5vw 4vw;
    background:
      linear-gradient(180deg, rgba(0, 170, 200, 0.08), rgba(244, 248, 249, 0.95)),
      #f4f8f9;
  }

  .uo-city-status__title {
    margin: 0 0 4px;
    font-size: clamp(18px, 5vw, 22px) !important;
    color: #08414d;
  }

  .uo-city-status__lead {
    margin: 0 0 12px;
    font-size: 13px;
    color: #4d646b;
  }

  .uo-city-status__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .uo-city-card {
    padding: 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(8, 65, 77, 0.12);
  }

  .uo-city-card__title {
    font-size: 15px !important;
  }

  .uo-city-card__event {
    min-height: 44px;
    padding: 10px 12px;
  }

  .uo-city-card__event-title {
    font-size: 14px;
  }

  .uo-city-card__widget,
  .uo-city-card--weather .uo-city-card__meteored {
    min-height: 320px;
    max-width: none;
    width: 100%;
  }

  .uo-city-card--weather .uo-city-card__meteored iframe {
    min-height: 0 !important;
    height: 336px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .uo-city-card__phone {
    min-height: 52px;
  }

  .uo-city-card__nav {
    min-height: 40px;
    position: relative;
    z-index: 2;
  }

  .uo-city-card--traffic {
    padding-bottom: 18px;
  }

  .uo-city-card__traffic-controls {
    position: relative;
    z-index: 2;
    margin-bottom: 4px;
  }

  .uo-city-card__video-wrap {
    aspect-ratio: 16 / 9;
  }

  .uo-cameras-live {
    margin-bottom: 16px;
    padding: 12px;
    max-width: 100%;
  }

  .uo-cameras-grid__list {
    grid-template-columns: 1fr;
  }

  .uo-live-play__icon {
    width: 52px;
    height: 52px;
  }

  .uo-cameras-live__bar {
    flex-direction: column;
    align-items: stretch;
  }

  body.uo-page-cameras-live.node-type-informacoes-de-ubatuba #page #content .node-content {
    padding-left: 4vw;
    padding-right: 4vw;
  }

  .uo-cameras-live__label select {
    width: 100%;
    min-width: 0;
  }

  .uo-cameras-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  /* Hide internal listing codes on public cards */
  #page #content .view-hospedagem .info-chamada-codigo {
    display: none !important;
  }

  .uo-price-note {
    display: block;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
  }

  /* Home — demote advertiser CTA below tourist sections visually */
  .page-home #home-chamada-cadastre-se {
    opacity: 0.95;
    margin-top: 8vw;
    padding: 8vw 5vw !important;
    background: #f4f7f8;
  }

  .page-home #home-chamada-cadastre-se .texto h2 {
    font-size: clamp(18px, 5vw, 22px) !important;
  }

  .page-home #home-chamada-cadastre-se .texto p {
    font-size: clamp(14px, 3.8vw, 16px) !important;
  }

  /* Home search — larger touch target, clearer field */
  #page #busca-praia-home .views-exposed-widgets {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(8, 25, 35, 0.18);
  }

  #page #busca-praia-home .views-exposed-widgets #edit-title-wrapper input,
  #page #busca-praia-home .views-exposed-widgets .views-submit-button input {
    min-height: 44px;
    font-size: clamp(14px, 3.8vw, 16px) !important;
  }

  /* Listing / home cards — clearer marketplace feel */
  #page #praias-home .group-praias ul li,
  #page #content .view-hospedagem .view-content ul li,
  #page #content .view-servi-os .view-content ul li {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(8, 25, 35, 0.08);
  }

  #page #content .view-hospedagem .view-content ul li.uo-marketplace-row,
  #page #content .view-servi-os .view-content ul li.uo-marketplace-row {
    overflow: visible;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none;
  }

  .uo-listing-card__body {
    padding: 13px 14px 15px;
  }

  .uo-listing-card__title {
    font-size: 18px;
  }

  .uo-listing-card__action {
    width: 100%;
    justify-content: center;
  }

  .uo-results-heading {
    margin: 0 0 14px;
    padding: 0 1px;
  }

  .uo-results-heading h2 {
    font-size: 21px !important;
  }

  #page #praias-home .group-praias ul li a,
  #page #content .view-hospedagem .info-chamadas,
  #page #content .view-servi-os .info-chamadas {
    border-radius: 12px;
  }

  /* Hospedagem — image ratio + compact price visible */
  #page #content .view-hospedagem .view-content ul li .views-field-field-imagem-chamada img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  #page #content .view-hospedagem .view-content ul li .views-field-nothing .info-chamada-valor {
    display: block !important;
    padding: 8px 0 0;
    width: 100%;
    background: transparent;
    color: #08414d;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
  }

  #page #content .view-hospedagem .view-content ul li .views-field-nothing .info-chamada-valor span.valor-value {
    font-size: 16px;
  }

  #page #content .view-hospedagem .view-content ul li .views-field-nothing .info-chamada-valor span.valor-diaria {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.85;
  }

  #page #content .view-hospedagem .view-content ul li .views-field-nothing .info-chamada-destalhes {
    display: none !important;
  }

  /* Serviços / o que fazer — vertical cards, less clutter */
  #page #content .view-servi-os .view-content ul li {
    display: flex;
    flex-direction: column;
    background: #fff;
    margin-bottom: 4.5vw;
  }

  #page #content .view-servi-os .view-content ul li .views-field-field-imagem-chamada {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #page #content .view-servi-os .view-content ul li .views-field-field-imagem-chamada img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
  }

  #page #content .view-servi-os .view-content ul li .views-field-title,
  #page #content .view-servi-os .view-content ul li .views-field-field-praia,
  #page #content .view-servi-os .view-content ul li .views-field-field-categoria,
  #page #content .view-servi-os .view-content ul li h4.categoria-servico {
    padding-left: 12px;
    padding-right: 12px;
  }

  #page #content .view-servi-os .view-content ul li .views-field-title {
    margin-top: 10px;
  }

  #page #content .view-servi-os .view-content ul li .views-field-field-telefone,
  #page #content .view-servi-os .view-content ul li .views-field-field-endereco {
    display: none !important;
  }

  /* Praias — cover image + clamp overlay title */
  #page #praias-home .group-praias ul li .views-field-field-image img,
  .page-praias #page #praias-home .group-praias ul li img,
  .page-cachoeiras #page #praias-home .group-praias ul li img,
  .page-ilhas #page #praias-home .group-praias ul li img,
  .uo-praias-listing #page #praias-home .group-praias ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #page #praias-home .group-praias ul li .views-field-title h3,
  #page #praias-home .group-praias ul li .views-field-title a {
    line-height: 1.25;
  }

  #page #praias-home .group-praias ul li .views-field-title h3 span:not(.regiao) {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.3;
  }

  /* Region chips — horizontal scroll, not collapsed with filters */
  .page-praias .filter-links-style,
  .page-cachoeiras .filter-links-style,
  .page-ilhas .filter-links-style,
  .uo-praias-listing .filter-links-style,
  #page #praias-home .filter-links-style {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 4vw 2vw;
    margin: 0 0 2vw;
    scrollbar-width: none;
  }

  .page-praias .filter-links-style::-webkit-scrollbar,
  .page-cachoeiras .filter-links-style::-webkit-scrollbar,
  .page-ilhas .filter-links-style::-webkit-scrollbar,
  .uo-praias-listing .filter-links-style::-webkit-scrollbar,
  #page #praias-home .filter-links-style::-webkit-scrollbar {
    display: none;
  }

  .page-praias .filter-links-style a,
  .page-cachoeiras .filter-links-style a,
  .page-ilhas .filter-links-style a,
  .uo-praias-listing .filter-links-style a,
  #page #praias-home .filter-links-style a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Home Praias — categoria-style chips + 2-col grid (like Onde ficar / O que fazer) */
  .page-home #page #praias-home .views-exposed-widgets,
  .front #page #praias-home .views-exposed-widgets {
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.65rem 0.75rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .page-home #page #praias-home .views-exposed-widget,
  .front #page #praias-home .views-exposed-widget {
    float: none !important;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-home #page #praias-home .views-exposed-widget label,
  .front #page #praias-home .views-exposed-widget label {
    display: block;
    margin: 0 0 0.4rem;
    padding: 0;
    color: #08414d;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    text-transform: none;
  }

  .page-home #page #praias-home .filter-links-style,
  .page-home #page #praias-home .view-filters .bef-select-as-links > .form-item,
  .front #page #praias-home .filter-links-style,
  .front #page #praias-home .view-filters .bef-select-as-links > .form-item {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    overflow: visible !important;
    width: 100%;
    margin: 0 0 0.35rem;
    padding: 0 !important;
    background: transparent;
  }

  .page-home #page #praias-home .filter-links-style a,
  .page-home #page #praias-home .view-filters .form-type-bef-link a,
  .front #page #praias-home .filter-links-style a,
  .front #page #praias-home .view-filters .form-type-bef-link a {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    margin: 0;
    padding: 0.3rem 0.65rem !important;
    border: 1px solid rgba(8, 65, 77, 0.12) !important;
    border-radius: 999px !important;
    background: #f4f8f9 !important;
    color: #08414d !important;
    font-size: 0.75rem !important;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none !important;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none !important;
  }

  .page-home #page #praias-home .filter-links-style a.active,
  .page-home #page #praias-home .filter-links-style a:hover,
  .page-home #page #praias-home .view-filters .form-type-bef-link a.active,
  .page-home #page #praias-home .view-filters .form-type-bef-link a:hover,
  .front #page #praias-home .filter-links-style a.active,
  .front #page #praias-home .filter-links-style a:hover,
  .front #page #praias-home .view-filters .form-type-bef-link a.active,
  .front #page #praias-home .view-filters .form-type-bef-link a:hover {
    color: #fff !important;
    background: #00AAC8 !important;
    border-color: #00AAC8 !important;
  }

  /* Home Praias — grid 2 colunas (sem carrossel) */
  .page-home #page #praias-home .group-praias,
  .front #page #praias-home .group-praias {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: visible !important;
    white-space: normal;
    cursor: default;
    box-sizing: border-box;
  }

  .page-home #page #praias-home .group-praias::-webkit-scrollbar,
  .front #page #praias-home .group-praias::-webkit-scrollbar {
    display: none !important;
  }

  .page-home #page #praias-home .group-praias ul,
  .front #page #praias-home .group-praias ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-direction: unset;
    flex-wrap: unset !important;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    max-width: none;
    margin: 1rem 0 0;
    padding: 0 !important;
    box-sizing: border-box;
  }

  .page-home #page #praias-home .block-inner,
  .front #page #praias-home .block-inner {
    padding: 0;
  }

  .page-home #page #praias-home h2.pane-title.block-title,
  .front #page #praias-home h2.pane-title.block-title,
  .page-home #page #praias-home .view-filters,
  .front #page #praias-home .view-filters,
  .page-home #page #praias-home .group-praias,
  .front #page #praias-home .group-praias,
  .page-home #page #praias-home .uo-home-section__more,
  .front #page #praias-home .uo-home-section__more,
  .page-home #page #praias-home .view-footer,
  .front #page #praias-home .view-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .page-home #page #praias-home h2.pane-title.block-title,
  .front #page #praias-home h2.pane-title.block-title {
    display: block !important;
    margin: 0 0 0.75rem;
    padding-top: 0;
    padding-bottom: 0;
    color: #08414d;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-transform: none;
  }

  .page-home #page #praias-home .group-praias ul li,
  .page-home #page #praias-home .group-praias ul li.views-row-first,
  .page-home #page #praias-home .group-praias ul li.views-row-last,
  .front #page #praias-home .group-praias ul li,
  .front #page #praias-home .group-praias ul li.views-row-first,
  .front #page #praias-home .group-praias ul li.views-row-last {
    display: block;
    float: none;
    flex: none;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    height: auto !important;
    margin: 0 !important;
    white-space: normal;
    overflow: hidden;
    border-radius: 12px;
  }

  .page-home #page #praias-home .group-praias ul li .views-field-field-image img,
  .front #page #praias-home .group-praias ul li .views-field-field-image img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 12px;
  }

  .page-home #page #praias-home .uo-home-section__more,
  .front #page #praias-home .uo-home-section__more,
  .page-home #page #praias-home .view-footer,
  .front #page #praias-home .view-footer {
    margin: 1.25rem 0 0;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
  }

  .page-home #page #praias-home .group-praias ul li .views-field-title,
  .front #page #praias-home .group-praias ul li .views-field-title {
    padding: 0.55rem !important;
  }

  .page-home #page #praias-home .group-praias ul li .views-field-title a,
  .front #page #praias-home .group-praias ul li .views-field-title a {
    font-size: 0.75rem !important;
  }

  .page-home #page #praias-home .group-praias ul li .views-field-title h3,
  .front #page #praias-home .group-praias ul li .views-field-title h3 {
    font-size: 0.85rem !important;
    line-height: 1.25;
  }

  .page-home #page #praias-home .group-praias ul li .views-field-title h3 span,
  .front #page #praias-home .group-praias ul li .views-field-title h3 span {
    font-size: 0.8rem;
    padding: 0.2rem 0.45rem !important;
  }

  .page-home #page #praias-home .group-praias ul li .views-field-title h3 span.regiao,
  .front #page #praias-home .group-praias ul li .views-field-title h3 span.regiao {
    font-size: 0.65rem !important;
  }

  .page-home #page #praias-home .group-praias ul li .views-field-title a:after,
  .front #page #praias-home .group-praias ul li .views-field-title a:after {
    margin-top: 0.5rem !important;
    padding: 0.3rem 0.65rem !important;
    font-size: 0.7rem !important;
  }

  .page-home #page #praias-home .group-praias ul li .views-field-field-nota-media,
  .front #page #praias-home .group-praias ul li .views-field-field-nota-media {
    top: 0.5rem !important;
    left: auto !important;
    right: 0.5rem !important;
  }

  .page-home #page #praias-home .group-praias ul li .views-field-field-nota-media .field-content:before,
  .front #page #praias-home .group-praias ul li .views-field-field-nota-media .field-content:before {
    width: 0.85rem;
    height: 0.85rem;
    margin-right: 0.25rem;
    margin-top: 0;
  }

  .page-home #page #praias-home .group-praias ul li .views-field-field-nota-media .field-content span,
  .front #page #praias-home .group-praias ul li .views-field-field-nota-media .field-content span {
    font-size: 0.8rem;
  }

  /* Filter toggles — mesma largura do form (onde ficar / o que fazer) */
  .uo-filter-toggle,
  .page-hospedagem #filtro-servicos-wrapper .btn-filtro-hospedagem,
  .page-servicos #filtro-servicos-wrapper .btn-filtro-servicos,
  .page-hospedagem #page #content #filtro-servicos-wrapper .btn-filtro-hospedagem,
  .page-servicos #page #content #filtro-servicos-wrapper .btn-filtro-servicos {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 8vw) !important;
    max-width: calc(100% - 8vw) !important;
    min-height: 44px;
    margin: 3vw 4vw 5vw !important;
    padding: 12px 16px;
    border: 0;
    border-radius: 10px;
    background: #00aac8 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    background-image: none !important;
  }

  .uo-filter-toggle.is-open,
  .page-hospedagem #filtro-servicos-wrapper .btn-filtro-hospedagem.is-open,
  .page-servicos #filtro-servicos-wrapper .btn-filtro-servicos.is-open {
    background: #08414d !important;
  }

  .uo-filters-collapsed {
    display: none !important;
  }

  .page-hospedagem #filtro-servicos-wrapper,
  .page-servicos #filtro-servicos-wrapper {
    display: block !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    width: 100% !important;
    margin: 0 0 4vw !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .page-hospedagem #filtro-servicos-wrapper > form,
  .page-servicos #filtro-servicos-wrapper > form,
  .page-hospedagem #page #content #filtro-servicos-wrapper > form,
  .page-servicos #page #content #filtro-servicos-wrapper > form {
    width: calc(100% - 8vw) !important;
    max-width: calc(100% - 8vw) !important;
    margin-left: 4vw !important;
    margin-right: 4vw !important;
    box-sizing: border-box !important;
  }

  /* Buscar: alinhado aos demais campos do .views-exposed-widgets (sem gutter extra). */
  .page-hospedagem #page #content #filtro-servicos-wrapper #edit-combine-wrapper,
  .page-hospedagem #filtro-servicos-wrapper #edit-combine-wrapper,
  .page-servicos #page #content #filtro-servicos-wrapper #edit-combine-wrapper,
  .page-servicos #filtro-servicos-wrapper #edit-combine-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .page-hospedagem #page #content #filtro-servicos-wrapper .views-exposed-form .views-exposed-widgets.clearfix,
  .page-hospedagem #filtro-servicos-wrapper .views-exposed-form .views-exposed-widgets.clearfix,
  .page-servicos #page #content #filtro-servicos-wrapper .views-exposed-form .views-exposed-widgets.clearfix,
  .page-servicos #filtro-servicos-wrapper .views-exposed-form .views-exposed-widgets.clearfix {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .page-hospedagem #page #content #filtro-servicos-wrapper .views-exposed-form .views-exposed-widgets.clearfix:before,
  .page-hospedagem #page #content #filtro-servicos-wrapper .views-exposed-form .views-exposed-widgets.clearfix:after,
  .page-hospedagem #filtro-servicos-wrapper .views-exposed-form .views-exposed-widgets.clearfix:before,
  .page-hospedagem #filtro-servicos-wrapper .views-exposed-form .views-exposed-widgets.clearfix:after,
  .page-servicos #page #content #filtro-servicos-wrapper .views-exposed-form .views-exposed-widgets.clearfix:before,
  .page-servicos #page #content #filtro-servicos-wrapper .views-exposed-form .views-exposed-widgets.clearfix:after,
  .page-servicos #filtro-servicos-wrapper .views-exposed-form .views-exposed-widgets.clearfix:before,
  .page-servicos #filtro-servicos-wrapper .views-exposed-form .views-exposed-widgets.clearfix:after {
    display: none !important;
    content: none !important;
  }

  /* display:block/none do global quebra o flex — + deve ir à direita como em Praia. */
  .page-hospedagem #page #content #filtro-servicos-wrapper #edit-combine-wrapper.uo-filter-group > label,
  .page-servicos #page #content #filtro-servicos-wrapper #edit-combine-wrapper.uo-filter-group > label,
  .page-hospedagem #filtro-servicos-wrapper #edit-combine-wrapper.uo-filter-group > label,
  .page-servicos #filtro-servicos-wrapper #edit-combine-wrapper.uo-filter-group > label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 44px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 13px !important;
    color: #08414d !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    cursor: pointer;
    box-sizing: border-box;
  }

  .page-hospedagem #filtro-servicos-wrapper #edit-combine-wrapper.uo-filter-group > label:after,
  .page-servicos #filtro-servicos-wrapper #edit-combine-wrapper.uo-filter-group > label:after {
    content: "+" !important;
    font-size: 20px !important;
    line-height: 1 !important;
    flex: 0 0 auto;
  }

  .page-hospedagem #filtro-servicos-wrapper #edit-combine-wrapper.uo-filter-group.is-open > label:after,
  .page-servicos #filtro-servicos-wrapper #edit-combine-wrapper.uo-filter-group.is-open > label:after {
    content: "−" !important;
  }

  /*
   * Padroniza controles abertos: Buscar (input) = Praia (select2).
   * Landscape força padding:3vw no combine e deixa o campo mais baixo que o select.
   */
  .page-hospedagem #page #content #filtro-servicos-wrapper #edit-combine-wrapper .views-widget input,
  .page-servicos #page #content #filtro-servicos-wrapper #edit-combine-wrapper .views-widget input,
  .page-hospedagem #filtro-servicos-wrapper #edit-combine-wrapper .views-widget input,
  .page-servicos #filtro-servicos-wrapper #edit-combine-wrapper .views-widget input,
  .page-hospedagem #page #content #filtro-servicos-wrapper #edit-field-praia-nid-wrapper .select2-container--default .select2-selection,
  .page-servicos #page #content #filtro-servicos-wrapper #edit-field-praia-nid-wrapper .select2-container--default .select2-selection,
  .page-hospedagem #filtro-servicos-wrapper #edit-field-praia-nid-wrapper .select2-container--default .select2-selection,
  .page-servicos #filtro-servicos-wrapper #edit-field-praia-nid-wrapper .select2-container--default .select2-selection,
  .page-hospedagem #page #content #filtro-servicos-wrapper #edit-field-praia-nid-wrapper .selection span.select2-selection,
  .page-servicos #page #content #filtro-servicos-wrapper #edit-field-praia-nid-wrapper .selection span.select2-selection {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid #dbe6ea !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #12333d !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-family: inherit !important;
  }

  .page-hospedagem #filtro-servicos-wrapper #edit-field-praia-nid-wrapper .select2-container,
  .page-servicos #filtro-servicos-wrapper #edit-field-praia-nid-wrapper .select2-container {
    width: 100% !important;
  }

  .page-hospedagem #filtro-servicos-wrapper #edit-field-praia-nid-wrapper .select2-selection__rendered,
  .page-servicos #filtro-servicos-wrapper #edit-field-praia-nid-wrapper .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    color: #12333d !important;
  }

  .page-hospedagem #filtro-servicos-wrapper #edit-field-praia-nid-wrapper .select2-selection__arrow,
  .page-servicos #filtro-servicos-wrapper #edit-field-praia-nid-wrapper .select2-selection__arrow {
    top: 0 !important;
    height: 100% !important;
  }

  .page-hospedagem #filtro-servicos-wrapper #edit-field-praia-nid-wrapper .select2-selection__placeholder,
  .page-servicos #filtro-servicos-wrapper #edit-field-praia-nid-wrapper .select2-selection__placeholder {
    color: #8ba3ad !important;
  }

  /* A single mobile filter system: chips first, advanced fields in a drawer. */
  .page-hospedagem .hospedagem-banner-topo form,
  .page-servicos .banner-topo-servicos form {
    display: none !important;
  }

  .page-hospedagem .hospedagem-banner-topo > p:not(.uo-routes-hub__eyebrow),
  .page-hospedagem .hospedagem-banner-topo .pane-content > p:not(.uo-routes-hub__eyebrow),
  .page-servicos .banner-topo-servicos > p:not(.uo-routes-hub__eyebrow),
  .page-servicos .banner-topo-servicos .pane-content > p:not(.uo-routes-hub__eyebrow) {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .page-hospedagem .hospedagem-banner-topo,
  .page-servicos .banner-topo-servicos,
  .page-servicos .banner-topo-servicos.uo-servicos-eyebrow-processed {
    min-height: 0 !important;
    padding: 5vw 4vw !important;
    box-sizing: border-box !important;
  }

  .page-hospedagem .filter-links-style,
  .page-servicos .filter-links-style {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    margin: 0;
    padding: 12px 4vw;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .page-hospedagem .filter-links-style::-webkit-scrollbar,
  .page-servicos .filter-links-style::-webkit-scrollbar {
    display: none;
  }

  .page-hospedagem .filter-links-style a,
  .page-servicos .filter-links-style a {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 13px;
    white-space: nowrap;
  }

  .uo-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff;
    color: #08758a;
    font-size: 11px;
  }

  #filtro-servicos-wrapper .uo-filter-group {
    height: auto !important;
    margin: 0 4vw 8px;
    padding: 0;
    border: 1px solid rgba(8, 65, 77, 0.12);
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
  }

  #filtro-servicos-wrapper .uo-filter-group > label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    margin: 0;
    padding: 10px 13px;
    color: #08414d;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
  }

  #filtro-servicos-wrapper .uo-filter-group > label:after {
    content: "+";
    font-size: 20px;
    line-height: 1;
    flex: 0 0 auto;
  }

  #filtro-servicos-wrapper .uo-filter-group.is-open > label:after {
    content: "−";
  }

  #filtro-servicos-wrapper .uo-filter-group .views-widget {
    padding: 0 13px 12px;
  }

  /* Readable body type floors (reduce fragile vw-only sizing) */
  body {
    font-size: clamp(14px, 3.8vw, 16px);
  }

  h1,
  h2 {
    font-size: clamp(20px, 5.5vw, 28px);
    line-height: 1.25;
  }

  /* Newsletter heading — readable on listing pages (praias/hospedagem) */
  #page #content .melhor-email .mauticform-email h1,
  #page #content .melhor-email .mauticform-email h2,
  #page #content #newslatter-block .melhor-email .mauticform-email h1,
  #page #content #newslatter-block .melhor-email .mauticform-email h2,
  #page #content #newslatter-block h2.mauticform-label,
  #mauticform_seu_melhor_email h1,
  #mauticform_seu_melhor_email h2,
  .mauticform_seu_melhor_email h1,
  .mauticform_seu_melhor_email h2 {
    font-size: 4.7vw !important;
    line-height: 1.35;
  }

  /* Menu drawer rows — comfortable tap targets */
  #header .content-width #block-system-main-menu ul li a {
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: clamp(15px, 4.2vw, 18px) !important;
  }

  /* Weather in header */
  #header,
  #header .content-width {
    height: 76px !important;
  }

  body #page {
    margin-top: 76px !important;
  }

  #header #block-gw2d-gw2d-header,
  #header .logo-header {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 0 !important;
  }

  /* Weather FAB — fixed bottom-right until JS moves it into #uo-fab-rail.
   * relative no header deixa o widget no topo/esquerda (pior anônimo). */
  #header #block-block-15,
  body.logged-in #header #block-block-15 {
    position: fixed !important;
    right: 12px !important;
    left: auto !important;
    top: auto !important;
    bottom: var(--uo-fab-rail-bottom, calc(56px + env(safe-area-inset-bottom, 0px) + 12px)) !important;
    transform: none !important;
    z-index: 920;
  }

  #header #block-block-15 .previsao-do-tempo,
  .previsao-do-tempo {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    height: 58px;
    margin: 0;
    padding: 4px;
    box-sizing: border-box;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(11, 92, 171, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    overflow: hidden;
  }

  /* A dock do assistente fica acima da bottom nav (paginas sem barra de CTA) */
  .uo-dock {
    --uo-dock-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px);
  }

  /* Beach detail — mobile */
  body.node-type-praia #page #content .node-praia {
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.node-type-praia #page #content .node-praia .content-node-left,
  body.node-type-praia #page #content .node-praia #informacoes-praia-acao,
  body.node-type-praia #page #content .node-praia .uo-praia-proximos-hint,
  body.node-type-praia #page #content .node-praia .comments-wrapper,
  body.node-type-praia #block-views-hospedagem-block-3,
  body.node-type-praia #block-views-servi-os-block-3 {
    width: auto;
    margin-left: 4vw;
    margin-right: 4vw;
  }

  body.node-type-praia #page #content .node-praia .praia-img {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    left: auto !important;
    top: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    background: transparent;
  }

  /* 1 foto: full width */
  body.node-type-praia #page #content .node-praia .praia-img:has(> a:only-child),
  body.node-type-praia #page #content .node-praia .praia-img:has(> a:first-child:last-child) {
    grid-template-columns: 1fr !important;
  }

  /* 2+ fotos: capa full + thumbs em 2 cols */
  body.node-type-praia #page #content .node-praia .praia-img:has(> a:first-child:nth-last-child(n + 2)) {
    grid-template-columns: 1fr 1fr !important;
  }

  body.node-type-praia #page #content .node-praia .praia-img a.modal-link {
    display: block !important;
    float: none !important;
    width: 100% !important;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
  }

  body.node-type-praia #page #content .node-praia .praia-img a.modal-link:first-child {
    grid-column: auto !important;
    aspect-ratio: 4 / 3;
  }

  body.node-type-praia #page #content .node-praia .praia-img:has(> a:only-child) a.modal-link:first-child,
  body.node-type-praia #page #content .node-praia .praia-img:has(> a:first-child:last-child) a.modal-link:first-child {
    grid-column: auto !important;
  }

  body.node-type-praia #page #content .node-praia .praia-img img {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 0;
  }

  body.node-type-praia #page #content .node-praia .praia-img img.thumb {
    max-height: none !important;
  }

  body.node-type-praia .uo-praia-proximos-hint,
  body.node-type-praia #block-views-hospedagem-block-3,
  body.node-type-praia #block-views-servi-os-block-3,
  body.node-type-praia .uo-detail-accordion,
  body.node-type-praia #mapa-pagina-wrapper {
    margin-left: 0;
    margin-right: 0;
  }

  body.node-type-praia .uo-detail-accordion {
    overflow: hidden;
    margin: 0 0 12px;
    border: 1px solid rgba(8, 65, 77, 0.12);
    border-radius: 12px;
    background: #fff;
  }

  body.node-type-praia .uo-detail-accordion__toggle {
    position: relative;
    width: 100%;
    min-height: 52px;
    padding: 13px 46px 13px 16px;
    border: 0;
    background: transparent;
    color: #08414d;
    font-size: 16px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
  }

  body.node-type-praia .uo-detail-accordion__toggle:after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 17px;
    transform: translateY(-50%);
    color: #00aac8;
    font-size: 24px;
  }

  body.node-type-praia .uo-detail-accordion.is-open .uo-detail-accordion__toggle:after {
    content: "−";
  }

  body.node-type-praia .uo-detail-accordion__content {
    padding: 0 16px 16px;
  }

  body.node-type-praia #mapa-pagina-wrapper {
    margin-top: 18px;
    padding: 16px;
    border-radius: 14px;
    background: #fff;
  }

  body.node-type-praia #mapa-pagina {
    width: 100%;
    min-height: 280px;
  }

  body.node-type-praia #page #content .view-hospedagem .view-content ul li,
  body.node-type-praia #page #content .view-servi-os .view-content ul li,
  body.node-type-praia #page #content .view-servi-os ul li {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

body.node-type-praia .uo-praia-cta .uo-praia-map-cta {
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
}

@media only screen and (min-width: 700px) {
  body.node-type-hospedagem #page #content .node-hospedagem {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 0.82fr);
    gap: 28px 34px;
    width: min(1180px, 92%);
    margin: 0 auto;
    padding: 30px 0 54px;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .bloco-titulo,
  body.node-type-hospedagem #page #content .node-hospedagem .uo-detail-summary {
    grid-column: 1 / -1;
    float: none;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(8, 25, 35, 0.06);
  }

  body.node-type-hospedagem #page #content .node-hospedagem .uo-detail-summary .hospedagem-capa {
    width: 100%;
    float: none;
    margin: 0;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .uo-detail-summary .hospedagem-capa img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .uo-detail-summary__body {
    float: none;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 26px 30px;
    background: #fff;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .bloco-titulo .nome,
  body.node-type-hospedagem #page #content .node-hospedagem .uo-detail-summary .nome {
    max-width: 900px;
    margin: 0 0 8px !important;
    font-size: clamp(28px, 3vw, 44px) !important;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .informacoes-gerais-cabecalho {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .praia-hospedagem {
    float: none;
    width: auto;
    padding: 0;
    font-size: 14px;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .informacoes-basicas {
    display: flex;
    float: none;
    flex-wrap: wrap;
    gap: 7px;
    width: auto;
    height: auto;
    margin: 0;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .informacoes-basicas div {
    margin: 0;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f2f7f8;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .informacoes-basicas label {
    font-size: 12px;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .informacoes-basicas label:after {
    display: none;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .informacoes-residencia {
    grid-column: 1;
    float: none;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .galeria-wrapper {
    margin-bottom: 26px;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .galeria-wrapper .flexslider .slides img {
    width: 100%;
    max-height: 540px;
    object-fit: cover;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .galeria-wrapper .flexslider-carousel .flex-viewport {
    max-height: 130px !important;
    overflow-y: hidden;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .descricao {
    max-width: 68ch;
    margin: 0 0 24px;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .descricao p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.65;
    text-align: left;
  }

  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    position: sticky;
    top: 94px;
    float: none !important;
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(8, 65, 77, 0.1);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(8, 25, 35, 0.06);
  }

  body.node-type-hospedagem #page #content .node-hospedagem .informacoes-residencia {
    min-width: 0;
  }

  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos > img {
    width: 100%;
    height: 180px;
    margin-bottom: 16px;
    border-radius: 10px;
    object-fit: cover;
  }

  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos .telefone-servicos,
  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos .telefone-servicos a {
    font-size: 20px;
  }

  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos .endereco-servicos,
  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos .email-servicos a,
  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos .site-servicos a {
    padding-right: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
  }

  /* Keep sticky CTA as a compact 3-col row (not stacked grid). */
  body.node-type-hospedagem #informacoes-servicos .uo-cta-bar,
  body.node-type-servicos #informacoes-servicos .uo-cta-bar {
    display: flex !important;
    align-items: stretch;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 10px;
    border-top: 1px solid rgba(8, 65, 77, 0.12);
    background: rgba(255, 255, 255, 0.96);
  }

  body.node-type-hospedagem #informacoes-servicos .uo-cta-bar > a,
  body.node-type-hospedagem #informacoes-servicos .uo-cta-bar .uo-itinerary-add,
  body.node-type-servicos #informacoes-servicos .uo-cta-bar > a,
  body.node-type-servicos #informacoes-servicos .uo-cta-bar .uo-itinerary-add {
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: static !important;
    float: none !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    min-height: 48px;
    margin: 0 !important;
    padding: 8px 5px !important;
    border-radius: 10px;
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1.15 !important;
    text-align: center;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body.node-type-hospedagem #informacoes-servicos .uo-cta-bar .botao-reserva,
  body.node-type-hospedagem #informacoes-servicos .uo-cta-bar .botao-pedido,
  body.node-type-servicos #informacoes-servicos .uo-cta-bar .botao-reserva,
  body.node-type-servicos #informacoes-servicos .uo-cta-bar .botao-pedido {
    order: 1;
    background: #00aac8 !important;
    color: #fff !important;
  }

  body.node-type-hospedagem #informacoes-servicos .uo-cta-bar .botao-whatsapp,
  body.node-type-servicos #informacoes-servicos .uo-cta-bar .botao-whatsapp {
    order: 2;
    background: #25d366 !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  body.node-type-hospedagem #informacoes-servicos .uo-cta-bar .botao-whatsapp:before,
  body.node-type-servicos #informacoes-servicos .uo-cta-bar .botao-whatsapp:before {
    display: none !important;
    content: none !important;
  }

  body.node-type-hospedagem #informacoes-servicos .uo-cta-bar .uo-itinerary-add,
  body.node-type-servicos #informacoes-servicos .uo-cta-bar .uo-itinerary-add {
    order: 3;
    background: #00aac8 !important;
    color: #fff !important;
    border: 0 !important;
  }

  /* Nested contact form must not reuse the old 24.5% floated card. */
  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario,
  body.node-type-servicos #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario {
    float: none !important;
    clear: both;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    margin: 16px 0 0 !important;
    padding: 16px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(8, 65, 77, 0.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario h4,
  body.node-type-servicos #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario h4 {
    float: none !important;
    width: auto !important;
    margin: 0 0 10px !important;
    color: #08414d !important;
    font-size: 14px !important;
    font-family: inherit !important;
    font-weight: 800 !important;
    text-transform: none !important;
  }

  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .uo-contact-form-toggle,
  body.node-type-servicos #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .uo-contact-form-toggle {
    width: 100%;
    margin: 0 0 10px;
  }

  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario,
  body.node-type-servicos #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario {
    float: none !important;
    clear: both;
    width: 100% !important;
    padding-top: 4px !important;
    border-top: 0 !important;
  }

  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario .form-item,
  body.node-type-servicos #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario .form-item {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 0 10px !important;
  }

  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario .webform-component--celular,
  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario .webform-component--telefone,
  body.node-type-servicos #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario .webform-component--celular,
  body.node-type-servicos #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario .webform-component--telefone {
    width: 100% !important;
  }

  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario label,
  body.node-type-servicos #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario label {
    float: none !important;
    width: auto !important;
    margin: 0 0 4px;
    padding-left: 2px !important;
    font-size: 12px !important;
  }

  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario textarea,
  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario input,
  body.node-type-servicos #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario textarea,
  body.node-type-servicos #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario input {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    min-height: 40px;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario textarea,
  body.node-type-servicos #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario textarea {
    min-height: 96px !important;
    border-radius: 10px !important;
  }

  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario fieldset.captcha,
  body.node-type-servicos #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario fieldset.captcha {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    overflow-x: auto;
  }

  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario fieldset.captcha textarea,
  body.node-type-hospedagem #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario fieldset.captcha input,
  body.node-type-servicos #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario fieldset.captcha textarea,
  body.node-type-servicos #page #content .node-hospedagem #informacoes-servicos #informacoes-proprietario .form-proprietario fieldset.captcha input {
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body.node-type-hospedagem #page #content .node-hospedagem .uo-related-listings,
  body.node-type-hospedagem #page #content .node-hospedagem .comments-wrapper {
    grid-column: 1 / -1;
    box-sizing: border-box;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  body.node-type-servicos #page #content .node-hospedagem {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 0.82fr);
    gap: 28px 34px;
    width: min(1180px, 92%);
    margin: 0 auto;
    padding: 30px 0 54px;
  }

  body.node-type-servicos #page #content .node-hospedagem .content-node-left {
    grid-column: 1;
    float: none;
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.node-type-servicos #page #content .node-hospedagem .uo-detail-summary {
    grid-column: 1 / -1;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(8, 25, 35, 0.06);
  }

  body.node-type-servicos #page #content .node-hospedagem .uo-detail-summary .hospedagem-capa {
    width: 100%;
    float: none;
    margin: 0;
  }

  body.node-type-servicos #page #content .node-hospedagem .uo-detail-summary .hospedagem-capa img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
  }

  body.node-type-servicos #page #content .node-hospedagem .uo-detail-summary__body {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 26px 30px;
    background: #fff;
  }

  body.node-type-servicos #page #content .node-hospedagem #informacoes-servicos {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    position: sticky;
    top: 94px;
    float: none !important;
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(8, 65, 77, 0.1);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(8, 25, 35, 0.06);
  }

  body.node-type-servicos #informacoes-servicos .uo-cta-bar {
    display: flex !important;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 10px;
    border-top: 1px solid rgba(8, 65, 77, 0.12);
  }

  body.node-type-servicos #page #content .node-hospedagem .descricao {
    max-width: 68ch;
  }

  body.node-type-servicos #page #content .node-hospedagem .descricao p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.65;
    text-align: left;
  }

  body.node-type-servicos #page #content .node-hospedagem .uo-related-listings,
  body.node-type-servicos #page #content .node-hospedagem .comments-wrapper {
    grid-column: 1 / -1;
  }

  .uo-contact-form-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid #00aac8;
    border-radius: 9px;
    background: #fff;
    color: #08758a;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
  }

  body.node-type-hospedagem .uo-detail-accordion {
    overflow: hidden;
    margin: 0 0 12px;
    border: 1px solid rgba(8, 65, 77, 0.12);
    border-radius: 12px;
    background: #fff;
  }

  body.node-type-hospedagem .uo-detail-accordion__toggle {
    position: relative;
    width: 100%;
    min-height: 52px;
    padding: 13px 46px 13px 16px;
    border: 0;
    background: transparent;
    color: #08414d;
    font-size: 16px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
  }

  body.node-type-hospedagem .uo-detail-accordion__toggle:after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 17px;
    transform: translateY(-50%);
    color: #00aac8;
    font-size: 24px;
  }

  body.node-type-hospedagem .uo-detail-accordion.is-open .uo-detail-accordion__toggle:after {
    content: "−";
  }

  body.node-type-hospedagem .uo-detail-accordion__content {
    padding: 0 16px 16px;
  }

  body.node-type-hospedagem #mapa-pagina-wrapper {
    margin-top: 26px;
    padding: 18px;
    border-radius: 14px;
    background: #fff;
  }

  body.node-type-hospedagem #mapa-pagina {
    width: 100%;
    min-height: 420px;
  }

  body.node-type-hospedagem #mapa-pagina-wrapper .uo-map-route {
    margin-top: 14px;
  }

  /* Beach detail — desktop (parity with servicos grid) */
  body.node-type-praia #page #content .node-praia {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 0.82fr);
    gap: 28px 34px;
    width: min(1180px, 92%);
    max-width: none;
    margin: 0 auto;
    padding: 30px 0 54px !important;
    position: static;
    min-height: 0;
  }

  body.node-type-praia #page #content .node-praia .uo-detail-summary {
    grid-column: 1 / -1;
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(8, 25, 35, 0.06);
  }

  body.node-type-praia #page #content .node-praia .uo-detail-summary .uo-praia-capa,
  body.node-type-praia #page #content .node-praia .uo-detail-summary .hospedagem-capa {
    width: 100%;
    float: none;
    margin: 0;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    max-height: 450px;
    background: #e8f1f3;
  }

  body.node-type-praia #page #content .node-praia .uo-detail-summary .uo-praia-capa > a,
  body.node-type-praia #page #content .node-praia .uo-detail-summary .hospedagem-capa > a {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  body.node-type-praia #page #content .node-praia .uo-detail-summary .uo-praia-capa img,
  body.node-type-praia #page #content .node-praia .uo-detail-summary .hospedagem-capa img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center center;
  }

  body.node-type-praia #page #content .node-praia .uo-detail-summary__body {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 26px 30px;
    background: #fff;
  }

  body.node-type-praia .uo-detail-summary__body .nota-media {
    display: none !important;
  }

  body.node-type-praia #page #content .node-praia .content-node-left {
    grid-column: 1;
    float: none;
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.node-type-praia #page #content .node-praia #informacoes-praia-acao {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    position: sticky;
    top: 94px;
    float: none !important;
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(8, 65, 77, 0.1);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(8, 25, 35, 0.06);
  }

  body.node-type-praia #informacoes-praia-acao > h2 {
    display: block !important;
    margin: 0 0 12px;
    color: #08414d;
    font-size: 1.25rem;
    font-weight: 800;
  }

  body.node-type-praia #informacoes-praia-acao .uo-praia-acao__facts {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 10px;
  }

  body.node-type-praia #informacoes-praia-acao .uo-praia-acao__hint {
    display: block !important;
    margin: 0 0 14px;
    color: #3d5a63;
    font-size: 0.95rem;
    line-height: 1.45;
  }

  body.node-type-praia #informacoes-praia-acao .uo-praia-cta {
    position: static !important;
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.node-type-praia #informacoes-praia-acao .uo-praia-cta > a,
  body.node-type-praia #informacoes-praia-acao .uo-praia-cta .uo-itinerary-add {
    flex: none;
    width: 100%;
    min-height: 44px;
    padding: 12px 10px;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    color: #fff;
    background: #00aac8;
    box-sizing: border-box;
  }

  body.node-type-praia #informacoes-praia-acao .uo-praia-cta .uo-itinerary-add {
    border: 1px solid rgba(0, 170, 200, 0.55);
    background: #fff;
    color: #00aac8;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  }

  body.node-type-praia #informacoes-praia-acao .uo-praia-cta .uo-itinerary-add:hover,
  body.node-type-praia #informacoes-praia-acao .uo-praia-cta .uo-itinerary-add:focus-visible {
    background: #00aac8;
    border-color: #00aac8;
    color: #fff;
    transform: translateY(-1px);
    outline: none;
    cursor: pointer;
  }

  body.node-type-praia #informacoes-praia-acao .uo-praia-cta .uo-praia-map-cta {
    background: #08414d;
  }

  /* Kill legacy 25vw absolute gallery on desktop. */
  body.node-type-praia #page #content .node-praia .praia-img,
  body.node-type-praia #page #content .node-praia .uo-praia-thumbs {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
    overflow: visible !important;
  }

  body.node-type-praia #page #content .node-praia .uo-praia-thumbs a.modal-link {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 10px;
  }

  body.node-type-praia #page #content .node-praia .uo-praia-thumbs img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    float: none;
  }

  body.node-type-praia .uo-praia-main .uo-detail-description,
  body.node-type-praia .uo-praia-main .uo-praia-descricao,
  body.node-type-praia #informacoes-local .uo-detail-description,
  body.node-type-praia #informacoes-local .uo-praia-descricao {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
    text-align: justify !important;
  }

  body.node-type-praia #informacoes-local .uo-praia-descricao h2,
  body.node-type-praia #informacoes-local .uo-detail-description h2 {
    text-align: left !important;
  }

  body.node-type-praia #informacoes-local .uo-praia-descricao p,
  body.node-type-praia #informacoes-local .uo-detail-description p {
    width: 100% !important;
    max-width: none !important;
    text-align: justify !important;
  }

  body.node-type-praia .uo-praia-main .uo-praia-acesso,
  body.node-type-praia .uo-praia-main .uo-praia-perfil,
  body.node-type-praia .uo-praia-main .como-chegar,
  body.node-type-praia .uo-praia-main .informacoes-praia-box {
    width: 100%;
    max-width: none;
  }

  body.node-type-praia .uo-praia-proximos-hint,
  body.node-type-praia #block-views-hospedagem-block-3,
  body.node-type-praia #block-views-servi-os-block-3,
  body.node-type-praia .comments-wrapper {
    grid-column: 1 / -1;
  }

  body.node-type-praia .uo-praia-proximos-hint {
    margin: 8px 0 14px;
    padding: 18px 20px;
    border-radius: 14px;
    background: #f2f7f8;
  }

  body.node-type-praia .uo-praia-proximos-hint h2 {
    margin: 0 0 6px;
    color: #08414d;
    font-size: 22px;
  }

  body.node-type-praia .uo-praia-proximos-hint p {
    margin: 0;
    color: #3d5a63;
  }

  body.node-type-praia #mapa-pagina-wrapper {
    margin-top: 26px;
    padding: 18px;
    border-radius: 14px;
    background: #fff;
  }

  body.node-type-praia #mapa-pagina {
    width: 100%;
    min-height: 420px;
  }

  body.node-type-praia #block-views-hospedagem-block-3,
  body.node-type-praia #block-views-servi-os-block-3 {
    margin: 18px 0 28px;
    padding: 22px 24px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(8, 25, 35, 0.06);
  }

  body.node-type-praia #block-views-hospedagem-block-3 .view-hospedagem,
  body.node-type-praia #block-views-servi-os-block-3 .view-servi-os {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.node-type-praia #block-views-hospedagem-block-3 .view-header h2,
  body.node-type-praia #block-views-servi-os-block-3 .view-header h2 {
    margin: 0 0 16px !important;
    color: #08414d !important;
    font-size: 24px !important;
  }

  body.node-type-praia #page #content .view-hospedagem .view-content ul,
  body.node-type-praia #page #content .view-servi-os .view-content ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body.node-type-praia #page #content .view-hospedagem .view-content ul li,
  body.node-type-praia #page #content .view-servi-os .view-content ul li,
  body.node-type-praia #page #content .view-servi-os ul li {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.node-type-praia .uo-detail-accordion {
    overflow: hidden;
    margin: 0 0 14px;
    border: 1px solid rgba(8, 65, 77, 0.12);
    border-radius: 12px;
    background: #fff;
  }

  body.node-type-praia .uo-detail-accordion__toggle {
    position: relative;
    width: 100%;
    min-height: 52px;
    padding: 13px 46px 13px 16px;
    border: 0;
    background: transparent;
    color: #08414d;
    font-size: 16px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
  }

  body.node-type-praia .uo-detail-accordion__toggle:after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 17px;
    transform: translateY(-50%);
    color: #00aac8;
    font-size: 24px;
  }

  body.node-type-praia .uo-detail-accordion.is-open .uo-detail-accordion__toggle:after {
    content: "−";
  }

  body.node-type-praia .uo-detail-accordion__content {
    padding: 0 16px 16px;
  }

  body.node-type-praia .comments-wrapper {
    margin-top: 24px;
  }
}

@media only screen and (min-width: 1024px) {
  .menu-backdrop {
    display: none !important;
  }

  body.open-menu .menu-backdrop {
    display: none !important;
  }

  /* Desktop: esconde o drawer "Mais filtros" (tablet 700–1023 mantém). */
  .page-hospedagem #filtro-servicos-wrapper .btn-filtro-hospedagem,
  .page-servicos #filtro-servicos-wrapper .btn-filtro-servicos {
    display: none !important;
  }
}

/* Final home mobile pass: compact first screen and keep the search usable. */
@media only screen and (max-width: 699px) {
  #header #button-menu.open-menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    margin: 0 !important;
    width: 44px !important;
    height: 44px !important;
    -webkit-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
    overflow: visible !important;
    z-index: 30;
  }

  #header #button-menu.open-menu:before {
    width: 36px;
    height: 28px;
    margin: 0;
    flex: 0 0 auto;
  }

  #header,
  #header .content-width {
    overflow: visible !important;
  }

  /* Logo no centro geométrico; menu (12px) e badge (12px) espelhados. */
  #header #block-gw2d-gw2d-header,
  #header.small #block-gw2d-gw2d-header {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    width: 168px !important;
    max-width: calc(100% - 120px) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
  }

  #header #block-gw2d-gw2d-header .logo-header,
  #header #block-gw2d-gw2d-header .logo-header-left,
  #header.small #block-gw2d-gw2d-header .logo-header,
  #header.small #block-gw2d-gw2d-header .logo-header-left,
  #header .logo-header,
  #header.small .logo-header-left {
    position: static !important;
    display: block !important;
    float: none !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-transform: none !important;
    transform: none !important;
  }

  .uo-account-badge,
  .uo-account-badge--header,
  #header.small .uo-account-badge--header,
  #header.small .uo-account-badge {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    -webkit-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
    z-index: 40 !important;
  }

  #header .content-width .block-content .logo-header .logo-header-left img,
  #header.small .content-width .block-content .logo-header .logo-header-left img {
    width: 100% !important;
    max-width: 168px !important;
    height: auto !important;
  }

  .page-home #home-banner,
  .page-home #home-banner .flexslider,
  .page-home #home-banner .flexslider .slides,
  .page-home #home-banner .flexslider .slides li,
  .page-home #home-banner .flexslider .slides li .views-field .imagem-full img {
    height: clamp(320px, 52vh, 430px) !important;
    min-height: 320px !important;
    max-height: 430px !important;
  }

  body.uo-chat-agent-open.page-home #home-banner,
  body.uo-chat-agent-open.page-home #home-banner .flexslider,
  body.uo-chat-agent-open.page-home #home-banner .flexslider .slides,
  body.uo-chat-agent-open.page-home #home-banner .flexslider .slides li,
  body.uo-chat-agent-open.page-home #home-banner .flexslider .slides li .views-field .imagem-full img {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
  }

  body.uo-chat-agent-open.page-home .uo-home-hero {
    --uo-hero-overlap: 100px;
  }

  body.uo-chat-agent-open.page-home .uo-home-hero__title {
    font-size: clamp(18px, 5vw, 22px) !important;
  }

  /* O texto do slide sai de cena: o hero do agente carrega a mensagem da home. */
  .page-home #home-banner .flexslider .slides li .box-text {
    display: none !important;
  }

  .page-home .uo-home-hero {
    --uo-hero-overlap: clamp(318px, 40vw, 210px);
    padding: 0 0 18px;
  }

  .page-home .uo-home-hero__eyebrow,
  .page-home .uo-home-hero__title,
  .page-home .uo-home-hero__lead {
    padding-left: 16px;
    padding-right: 16px;
  }

  .page-home .uo-home-hero__eyebrow {
    padding-top: 14px;
    font-size: 11px;
  }

  .page-home .uo-home-hero__title {
    margin-bottom: 8px;
    font-size: clamp(21px, 6vw, 26px) !important;
  }

  .page-home .uo-home-hero__lead {
    font-size: 14px;
  }

  .page-home .uo-home-hero__shortcuts {
    margin-top: 40px;
    margin-bottom: 32px;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .page-home .uo-home-hero__shortcuts::-webkit-scrollbar {
    display: none;
  }

  .page-home .uo-home-hero__shortcuts ul {
    width: max-content;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 16px;
  }

  .page-home .uo-home-hero__chip {
    min-height: 40px;
    padding: 10px 13px;
    white-space: nowrap;
  }

  .page-home .uo-city-status {
    margin: 0;
    padding: 20px 16px;
  }

  .page-home .uo-city-card__phone-label {
    font-size: 12px;
  }

  .page-home .uo-city-card__phone-number {
    font-size: 13px;
  }

  .page-home #home-chamada-cadastre-se {
    margin-top: 0;
  }
}