/* ===== Tokens (iguais ao visual referência) ===== */
:root{
  --nav: #191E3B;
  --link: #1668E3;
  --text: #191E3B;
  --muted: #4D5167;
  --muted-2: #676A7D;
  --tint: #ECF4FD;
  --tint-2: #C8DFF9;
  --border: #E6E8EF;
  --border-2: #818494;
  --bg: #FFFFFF;
  --shadow: 0 10px 30px rgba(25,30,59,.10);

  /* Tipos (se você tiver as fontes, instale/importe) */
  --font: "Centra No2", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-serif: "Recoleta", Georgia, "Times New Roman", serif;

  --radius: 18px;
  --radius-sm: 14px;
  --topbar-h: 56px;
  --tabs-h: 48px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }

.container{
  width: min(100% - 32px, 760px);
  margin-inline: auto;
}

/* ===== Topbar ===== */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--nav);
  z-index: 50;
}
.topbar__inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.topbar__actions{ display:flex; gap:10px; }

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-weight: 650;
  letter-spacing: .2px;
}
.brand__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: #FF3B3B;
}
.brand__name{
  font-size: 15px;
  white-space: nowrap;
}

.iconbtn{
  border: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* ===== Layout base ===== */
.page{
  padding-top: var(--topbar-h);
}

.gallery{
  padding-top: 10px;
}
.gallery__frame{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #dfe6f3;
}

/* Slides */
.gallery__slides{
  display: flex;
  width: 100%;
  transform: translateX(0%);
  transition: transform .35s ease;
}
@media (prefers-reduced-motion: reduce){
  .gallery__slides{ transition: none; }
}
.gallery__slide{
  min-width: 100%;
  aspect-ratio: 16/11;
}
.gallery__img{
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.gallery__img--1{ background-image: linear-gradient(135deg, #DCE7FF, #BFD3FF); }
.gallery__img--2{ background-image: linear-gradient(135deg, #E8F0FF, #CBE0FF); }
.gallery__img--3{ background-image: linear-gradient(135deg, #D9E4FF, #BBD0FF); }

.gallery__dots{
  position: absolute;
  left: 0; right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
}
.dot{
  width: 7px; height: 7px;
  border-radius: 999px;
  background: rgba(25,30,59,.35);
  border: 0;
}
.dot.is-active{
  width: 20px;
  background: rgba(25,30,59,.75);
}

.gallery__count{
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(25,30,59,.82);
  color: #fff;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ===== Tabs ===== */
.sectionnav{
  position: sticky;
  top: var(--topbar-h);
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.sectionnav__inner{
  height: var(--tabs-h);
  display: flex;
  gap: 22px;
  align-items: end;
  overflow-x: auto;
  scrollbar-width: none;
}
.sectionnav__inner::-webkit-scrollbar{ display:none; }

.tab{
  border: 0;
  background: transparent;
  padding: 14px 0 12px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.tab.is-active{
  color: var(--link);
  font-weight: 650;
}
.tab.is-active::after{
  content:"";
  position:absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px;
  background: var(--link);
}

/* ===== Typo ===== */
.section{
  padding: 18px 0 6px;
}
.hotelname{
  font-family: var(--font-serif);
  font-weight: 520;
  font-size: 34px;
  line-height: 1.05;
  margin: 10px 0 6px;
}
.stars{
  color: var(--muted-2);
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.h2{
  font-size: 18px;
  margin: 18px 0 12px;
  font-weight: 760;
}
.h3{
  font-size: 16px;
  margin: 18px 0 10px;
  font-weight: 760;
}
.p{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  margin: 10px 0;
}

.link{
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--link);
  font-weight: 650;
  font-size: 14px;
  margin-top: 6px;
}

.linkbtn{
  border: 0;
  background: transparent;
  color: var(--link);
  font-weight: 650;
  font-size: 14px;
  padding: 0;
  margin-top: 8px;
  cursor: pointer;
}

/* ===== Rating ===== */
.ratingrow{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 6px 0 2px;
}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 22px;
  padding: 0 9px;
  border-radius: 6px;
  background: #EDF0F7;
  color: var(--text);
  font-weight: 780;
  font-size: 12px;
}
.ratingrow__text{
  color: var(--muted);
  font-weight: 650;
  font-size: 14px;
}

/* ===== Highlights ===== */
.highlights{
  display: grid;
  gap: 12px;
  margin-top: 8px;
}
.highlight{
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
}
.highlight__icon{
  width: 40px; height: 40px;
  border-radius: 999px;
  background: #EFE6D1;
  display:grid;
  place-items:center;
  font-size: 18px;
}
.highlight__title{
  font-weight: 760;
  margin: 1px 0 2px;
}
.highlight__text{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

/* ===== Info banner ===== */
.infobanner{
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--tint);
  border: 1px solid rgba(22,104,227,.15);
}
.infobanner__icon{
  width: 40px; height: 40px;
  border-radius: 999px;
  background: #E9DDBF;
  display:grid;
  place-items:center;
}
.infobanner__title{
  font-weight: 760;
  font-size: 14px;
}
.infobanner__text{
  font-size: 13px;
  color: var(--muted);
}

/* ===== Amenities ===== */
.amenities{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  margin: 12px 0 4px;
}
.amenity{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: var(--muted);
  font-size: 14px;
}
.amenity__icon{
  width: 22px;
  display:inline-flex;
  justify-content:center;
}

/* ===== Map card ===== */
.mapcard{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
}
.mapcard__map{
  aspect-ratio: 16/10;
  background:
    radial-gradient(circle at 30% 35%, rgba(22,104,227,.18), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(25,30,59,.14), transparent 50%),
    linear-gradient(135deg, #F1F7FF, #E6F0FF);
}
.mapcard__body{
  padding: 12px;
}
.mapcard__addr{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 6px;
}

/* ===== POI list ===== */
.poi{
  margin-top: 14px;
  border-top: 1px solid var(--border);
}
.poi__row{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.poi__left{
  color: var(--text);
  font-size: 14px;
}
.poi__right{
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

/* ===== Checks list ===== */
.checks{
  display: grid;
  gap: 18px;
}
.check__head{
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.check__mark{
  width: 18px;
  color: var(--text);
  font-weight: 900;
  margin-top: 1px;
}
.check__title{
  font-weight: 820;
  margin-bottom: 3px;
}
.check__meta{
  color: var(--muted);
  font-size: 14px;
}
.check__text{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* ===== Access ===== */
.access{
  display: grid;
  gap: 16px;
  margin-top: 10px;
}
.access__title{
  font-weight: 820;
  display:flex;
  align-items:center;
  gap: 8px;
  margin-bottom: 8px;
}
.list{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* ===== Accordion ===== */
.accordion{
  border-top: 1px solid var(--border);
  margin-top: 10px;
}
.acc{
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  display:flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}
.acc__chev{
  color: var(--muted);
}
.accpanel{
  padding: 0 0 12px;
}

/* ===== Reviews summary ===== */
.reviewsummary{
  margin-top: 6px;
}
.reviewsummary__big{
  font-size: 36px;
  font-weight: 860;
  line-height: 1;
}
.reviewsummary__label{
  font-weight: 760;
  color: var(--muted);
  margin-top: 4px;
}
.reviewsummary__small{
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}
.reviewsummary__grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--border);
  margin-top: 14px;
}
.reviewmetric{
  padding: 12px 0;
  text-align: center;
  border-right: 1px solid var(--border);
}
.reviewmetric:last-child{ border-right: 0; }
.reviewmetric__val{
  font-weight: 860;
  font-size: 14px;
}
.reviewmetric__lbl{
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

/* ===== Footer ===== */
.footer{
  background: #F6EBDD;
  margin-top: 18px;
  padding: 22px 0 90px;
}
.footer__cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.footer__title{
  font-weight: 850;
  margin-bottom: 10px;
}
.footer__link{
  display:block;
  color: var(--link);
  font-weight: 650;
  font-size: 14px;
  margin: 8px 0;
}
.footer__fineprint{
  color: var(--muted);
  font-size: 12px;
  margin-top: 18px;
  line-height: 1.35;
}

/* ===== Bottom bar ===== */
.bottombar{
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  padding-bottom: calc(var(--safe-b) + 10px);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  z-index: 60;
}
.bottombar__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
}
.bottombar__main{
  font-weight: 880;
  font-size: 18px;
}
.bottombar__sub{
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.cta{
  border: 0;
  background: var(--nav);
  color: #fff;
  font-weight: 780;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  cursor: pointer;
}

/* Espaço pra não ficar atrás da bottombar */
.spacer{
  height: calc(86px + var(--safe-b));
}

/* Desktop pequenos ajustes */
@media (min-width: 900px){
  .hotelname{ font-size: 40px; }
  .section{ padding: 22px 0 10px; }
  .footer{ padding-bottom: 110px; }
}