/* Hotéis Costa Norte — cores da marca: azul da vela (Ingleses), amarelo da vela (Ponta das Canas), azul-marinho e areia.
   ui-ux-pro-max: navy + dourado para hospitalidade; tipografia editorial (Fraunces) + sans legível (Manrope). */
:root {
  --navy: #0f2740;
  --navy-2: #173656;
  --ocean: #3a67ad;
  --ocean-l: #4f75b3;
  --sun: #f5b900;
  --sun-d: #a87c00;
  --sand: #f8f4ec;
  --sand-2: #efe7d8;
  --ink: #13243a;
  --muted: #586579;
  --line: rgba(19,36,58,.12);
  --line-d: rgba(255,255,255,.16);
  --wa: #25d366;
  --serif: Fraunces, Georgia, serif;
  --sans: Manrope, system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: 1240px;
  --r: 18px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--sand); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.5rem); }
h2 em, h1 em { font-style: italic; color: var(--ocean); }
p { margin: 0; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ocean); outline-offset: 3px; }
::selection { background: var(--sun); color: var(--navy); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.ing { background: var(--ocean-l); }
.dot.pdc { background: var(--sun); }

.kicker { font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--sun); margin-bottom: 16px; }
.kicker.dark { color: var(--ocean); }
.sec-head { max-width: 760px; margin-bottom: 56px; }
.sec-head.center { margin-inline: auto; }
.sec-lead { margin-top: 18px; font-size: 1.08rem; color: var(--muted); }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font-family: var(--sans); font-size: .9rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.btn:active { transform: scale(.98); }
.btn-sun { background: var(--sun); color: var(--navy); }
.btn-sun:hover { background: #ffc81f; }
.btn-ocean { background: var(--ocean); color: #fff; }
.btn-ocean:hover { background: var(--navy); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--ocean); }
.btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.btn-ghost:hover { background: #fff; color: var(--navy); }
.btn-lg { min-height: 56px; padding: 0 32px; font-size: .95rem; }
.btn-sm { min-height: 38px; padding: 0 18px; font-size: .82rem; }
.link { display: inline-flex; align-items: center; gap: 8px; padding: 0 0 3px; background: none; border: 0; border-bottom: 2px solid currentColor; font-family: var(--sans); font-size: .9rem; font-weight: 700; color: var(--ocean); text-decoration: none; cursor: pointer; transition: gap .3s var(--ease), color .3s; }
.link::after { content: "→"; }
.link:hover { gap: 12px; color: var(--navy); }

/* ============ Cabeçalho ============ */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color .4s, box-shadow .4s; }
.top.solid { background: rgba(15,39,64,.96); box-shadow: 0 1px 0 var(--line-d); backdrop-filter: blur(8px); }
.top-in { display: flex; align-items: center; gap: 28px; min-height: 80px; position: relative; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.logo img { height: 40px; width: auto; }
.logo span { display: grid; white-space: nowrap; font-family: var(--serif); font-size: 1.35rem; line-height: 1; letter-spacing: .01em; }
.logo small { font-family: var(--sans); font-size: .6rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--sun); margin-bottom: 4px; }
.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a { color: #fff; text-decoration: none; font-size: .86rem; font-weight: 600; opacity: .9; position: relative; padding: 6px 0; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--sun); transform: scaleX(0); transition: transform .4s var(--ease); }
.menu a:hover { opacity: 1; }
.menu a:hover::after { transform: scaleX(1); }
.top-cta { display: flex; align-items: center; gap: 16px; }
.talk { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: #fff; font-size: .86rem; font-weight: 600; cursor: pointer; opacity: .9; }
.talk:hover { opacity: 1; }
.talk svg { width: 18px; height: 18px; fill: var(--wa); }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; background: none; border: 1px solid var(--line-d); cursor: pointer; place-content: center; gap: 6px; }
.burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; }

/* ============ Hero ============ */
.hero { position: relative; z-index: 3; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; background: var(--navy); color: #fff; overflow-x: clip; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2s ease; }
.hero-media img.on { opacity: 1; animation: drift 9s ease-out both; }
@keyframes drift { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,39,64,.6) 0%, rgba(15,39,64,.05) 28%, rgba(15,39,64,.25) 55%, rgba(15,39,64,.9) 100%), linear-gradient(90deg, rgba(15,39,64,.55), transparent 65%); }
.hero-in { position: relative; padding-bottom: 40px; }
.hero h1 { max-width: 15ch; font-family: var(--sans); font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
.hero h1 em { color: var(--sun); font-style: normal; font-weight: 800; display: block; }
.hero-sub { margin-top: 22px; max-width: 56ch; font-size: 1.08rem; color: rgba(255,255,255,.92); }

/* Barra de reserva */
.book-wrap { position: relative; padding-bottom: 36px; }
.booking { position: relative; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr auto; background: #fff; color: var(--ink); border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); }
.bf-btn { display: grid; gap: 2px; text-align: left; padding: 16px 24px; min-height: 80px; background: none; border: 0; border-right: 1px solid var(--line); cursor: pointer; transition: background-color .3s; min-width: 0; }
.bf-btn:first-child { border-radius: 22px 0 0 22px; }
.bf-btn:hover, .bf-btn.is-active { background: var(--sand); }
.bf-l { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bf-v { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 700; letter-spacing: -0.01em; font-size: 1.12rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-go { display: grid; align-content: center; justify-items: center; gap: 4px; padding: 12px 16px; }
.bf-go .btn { min-height: 52px; }
.bf-wa { font-size: .76rem; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.bf-wa:hover { color: var(--ocean); }

/* Popovers (abrem para cima) */
.pop { position: absolute; bottom: calc(100% + 12px); z-index: 30; background: #fff; color: var(--ink); border-radius: 18px; padding: 18px 20px; box-shadow: 0 30px 70px -20px rgba(15,39,64,.45); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .35s var(--ease); }
.pop.is-open { opacity: 1; transform: none; }
.pop-hotel { width: 380px; padding: 10px; display: grid; gap: 4px; }
.opt { display: flex; align-items: center; gap: 14px; padding: 14px; text-align: left; background: none; border: 0; border-radius: 12px; cursor: pointer; transition: background-color .2s; }
.opt:hover, .opt[aria-selected="true"] { background: var(--sand); }
.opt span { display: grid; }
.opt b { font-weight: 700; }
.opt small { font-size: .8rem; color: var(--muted); }
.pop-cal { width: min(560px, 100%); }
.pop-guests { width: 300px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cal-hint { font-size: .84rem; color: var(--muted); }
.cal-nav { width: 36px; height: 36px; border-radius: 50%; background: none; border: 1px solid var(--line); cursor: pointer; display: grid; place-items: center; }
.cal-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.cal-title { font-family: var(--serif); font-size: 1.15rem; text-align: center; margin: 4px 0 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.cal-w { font-size: .66rem; font-weight: 700; color: var(--muted); text-align: center; padding: 2px 0 6px; }
.day { position: relative; isolation: isolate; height: 34px; border: 0; background: transparent; font-size: .84rem; cursor: pointer; }
.day::before { content: ""; position: absolute; inset: 1px 3px; z-index: -1; border-radius: 999px; transition: background-color .15s; }
.day:hover:not(:disabled)::before { background: var(--sand-2); }
.day:disabled { color: rgba(19,36,58,.25); cursor: default; }
.day.is-today { color: var(--ocean); font-weight: 800; }
.day.is-range { background: rgba(245,185,0,.18); }
.day.is-start::before, .day.is-end::before { background: var(--sun); }
.day.is-start, .day.is-end { font-weight: 800; color: var(--navy); }
.day.is-start { background: linear-gradient(90deg, transparent 50%, rgba(245,185,0,.18) 50%); }
.day.is-end { background: linear-gradient(90deg, rgba(245,185,0,.18) 50%, transparent 50%); }
.day.is-start.is-end { background: none; }
.day.is-preview::before { background: rgba(245,185,0,.55); }
.pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--muted); }
.pop-foot .btn:disabled { opacity: .4; cursor: default; }
.g-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-weight: 600; }
.g-row + .g-row { border-top: 1px solid var(--line); }
.step { display: inline-flex; align-items: center; gap: 14px; }
.step output { min-width: 20px; text-align: center; font-weight: 700; }
.step button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ocean); background: none; color: var(--ocean); font-size: 1.1rem; cursor: pointer; transition: background-color .25s, color .25s; }
.step button:hover:not(:disabled) { background: var(--ocean); color: #fff; }
.step button:disabled { border-color: var(--line); color: rgba(19,36,58,.25); cursor: default; }

/* ============ Seções ============ */
.sec { padding: 130px 0; }

/* Os dois hotéis */
.h-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.h-card { background: #fff; border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 50px -36px rgba(15,39,64,.45); }
.h-pic { position: relative; display: block; padding: 0; border: 0; aspect-ratio: 16 / 10; overflow: hidden; cursor: zoom-in; background: var(--sand-2); }
.h-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.h-pic:hover img { transform: scale(1.04); }
.h-tag { position: absolute; left: 18px; top: 18px; padding: 8px 14px; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #fff; background: var(--ocean); }
.pdc .h-tag { background: var(--sun); color: var(--navy); }
.h-body { display: grid; gap: 18px; padding: 32px 34px 36px; }
.h-body h3 { font-size: 2rem; }
.h-body h3 b { font-weight: 500; color: var(--ocean); }
.pdc .h-body h3 b { color: var(--sun-d); }
.h-body > p { color: var(--muted); }
.feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.feats li { display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 600; }
.feats li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--ocean) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pdc .feats li::before { background-color: var(--sun-d); }
.h-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 6px; }

/* Explorar (abas) */
.explore { background: var(--navy); color: #fff; }
.explore h2 em { color: var(--sun); }
.ex-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 44px; }
.tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.08); }
.tab { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: none; color: rgba(255,255,255,.8); font-weight: 700; font-size: .92rem; cursor: pointer; transition: background-color .3s, color .3s; }
.tab::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ocean-l); }
.tab.pdc::before { background: var(--sun); }
.tab.is-on { background: #fff; color: var(--navy); }
.tabs.small { background: var(--sand-2); }
.tabs.small .tab { color: var(--muted); min-height: 40px; padding: 0 18px; font-size: .86rem; }
.tabs.small .tab.is-on { background: #fff; color: var(--navy); }
.ex-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 250px 250px; gap: 12px; }
.mz { position: relative; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--navy-2); }
.mz img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mz:hover img { transform: scale(1.05); }
.mz-0 { grid-row: span 2; }
.mz span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,39,64,.55); font-weight: 700; color: #fff; }
.ex-info { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; margin: 48px 0 80px; align-items: start; }
.ex-desc { font-family: var(--serif); font-size: 1.35rem; line-height: 1.5; color: rgba(255,255,255,.92); }
.ex-hl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 26px 24px; }
.ex-hl li { display: grid; align-content: start; gap: 4px; padding-top: 16px; border-top: 2px solid var(--ocean-l); }
.explore[data-h="pdc"] .ex-hl li { border-top-color: var(--sun); }
.ex-hl b { font-size: 1rem; }
.ex-hl span { font-size: .86rem; color: rgba(255,255,255,.7); }
.ex-rooms-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.ex-rooms-head h3 { font-size: 2.2rem; }
.ex-rooms-head p { color: rgba(255,255,255,.72); max-width: 52ch; }

/* Carrossel de apartamentos: sempre 3 inteiros */
.sl-wrap { position: relative; }
.slider { --gap: 24px; --per: 3; display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider::-webkit-scrollbar { display: none; }
.room { flex: 0 0 calc((100% - var(--gap) * (var(--per) - 1)) / var(--per)); scroll-snap-align: start; display: flex; flex-direction: column; }
.room-img { position: relative; display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--navy-2); cursor: zoom-in; }
.room-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.room:hover .room-img img { transform: scale(1.05); }
.room-img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(0deg, rgba(15,39,64,.7), transparent); }
.room-cap { position: absolute; z-index: 1; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--navy); font-size: .74rem; font-weight: 700; }
.room-count { position: absolute; z-index: 1; right: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: #fff; }
.room-count svg { width: 17px; height: 17px; fill: none; stroke: var(--sun); stroke-width: 1.8; }
.room-body { display: grid; gap: 10px; padding-top: 20px; }
.room h4 { font-size: 1.6rem; }
.room p { color: rgba(255,255,255,.75); font-size: .93rem; min-height: 4.8em; }
.room-actions { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 4px; }
.explore .link { color: var(--sun); }
.explore .link:hover { color: #fff; }
.sl-btn { width: 52px; height: 52px; border-radius: 50%; border: 0; background: #fff; color: var(--navy); cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); transition: background-color .3s, transform .3s var(--ease); }
.sl-btn:hover { background: var(--sun); transform: scale(1.06); }
.sl-btn[hidden] { display: none; }
.sl-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.sl-side { position: absolute; z-index: 4; top: 30%; transform: translateY(-50%); }
.sl-side:hover { transform: translateY(-50%) scale(1.06); }
.sl-l { left: -26px; }
.sl-r { right: -26px; }
.sl-bar { display: flex; align-items: center; gap: 24px; margin-top: 40px; }
.sl-count { font-family: var(--serif); font-size: 1.25rem; min-width: 70px; }
.sl-progress { position: relative; flex: 1; height: 2px; border-radius: 2px; background: var(--line-d); overflow: hidden; }
.sl-progress span { position: absolute; left: 0; top: 0; height: 100%; background: var(--sun); transition: width .3s; }

/* Restaurante */
.rest-in { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: stretch; }
.rest-text { display: grid; gap: 22px; }
.rest-text > p { color: var(--muted); }
.rest h2 em { color: var(--sun-d); }
.rest .kicker { color: var(--sun-d); }
.rest-hours { display: grid; gap: 18px; padding: 26px; border-radius: var(--r); background: #fff; }
.rest-hours .tabs { justify-self: start; }
.rest-hours dl { margin: 0; display: grid; }
.rest-hours dl div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rest-hours dt { font-weight: 700; }
.rest-hours dd { margin: 0; color: var(--muted); text-align: right; }
.rest-note { font-size: .84rem; color: var(--muted); }
.rest-pics { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1.35fr 1fr 1fr; gap: 12px; min-height: 100%; }
.rp { position: relative; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--sand-2); }
.rp img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.rp:hover img { transform: scale(1.05); }
.rp-a { grid-column: span 2; }
.rp span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,39,64,.5); color: #fff; font-weight: 700; }

/* Eventos */
.events { background: var(--sand-2); }
.ev-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; }
.ev-pics { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; height: 560px; }
.ep { padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: var(--sand); }
.ep img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ep:hover img { transform: scale(1.05); }
.ep-a { grid-row: span 2; }
.ev-text { display: grid; gap: 22px; }
.ev-text > p { color: var(--muted); }
.ev-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ev-stats li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ev-stats b { flex: none; min-width: 110px; font-family: var(--serif); font-weight: 400; font-size: 1.9rem; color: var(--ocean); }
.ev-stats span { color: var(--muted); }
.ev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.ev-note { font-size: .84rem; color: var(--muted); }

/* Pacotes */
.pk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pk { background: #fff; border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 50px -40px rgba(15,39,64,.5); }
.pk img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pk > div { display: grid; gap: 12px; padding: 26px 28px 30px; align-content: start; flex: 1; }
.pk-tag { justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--sand-2); font-size: .72rem; font-weight: 700; color: var(--muted); }
.pk h3 { font-size: 1.6rem; }
.pk p { color: var(--muted); font-size: .95rem; }
.pk .link { justify-self: start; margin-top: auto; }

/* Avaliações */
.voices { background: var(--ocean); color: #fff; }
.voices-in { display: grid; grid-template-columns: 300px 1fr; gap: 70px; align-items: center; }
.award { display: grid; gap: 18px; justify-items: start; }
.award-seal { width: 140px; height: 140px; border-radius: 50%; background: #fff; color: var(--navy); display: grid; place-content: center; text-align: center; font-family: var(--serif); font-size: 1.15rem; line-height: 1.1; box-shadow: 0 0 0 6px rgba(255,255,255,.2); }
.award-seal small { margin-top: 6px; font-family: var(--sans); font-weight: 800; font-size: .8rem; letter-spacing: .2em; color: var(--sun-d); }
.award p { font-size: 1rem; color: rgba(255,255,255,.88); }
.award b { color: #fff; }
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.qt { display: grid; gap: 20px; align-content: start; padding: 32px; border-radius: var(--r); background: rgba(255,255,255,.1); }
.qt blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.55; }
.qt figcaption { font-size: .84rem; color: rgba(255,255,255,.8); }
.qt figcaption b { color: var(--sun); }

/* Norte da Ilha */
.nt-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 280px 280px; gap: 14px; }
.nt { position: relative; border-radius: 16px; overflow: hidden; background: var(--sand-2); }
.nt img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.nt:hover img { transform: scale(1.04); }
.nt-a { grid-row: span 2; }
.nt-d { grid-column: span 2; }
.nt figcaption { position: absolute; inset: auto 0 0 0; display: grid; gap: 2px; padding: 60px 22px 20px; color: #fff; font-size: .9rem; background: linear-gradient(0deg, rgba(15,39,64,.85), transparent); }
.nt figcaption b { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; }

/* Contato */
.contact { padding-top: 40px; }
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ct { display: grid; grid-template-columns: 220px 1fr; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: 0 24px 50px -40px rgba(15,39,64,.5); }
.ct img { width: 100%; height: 100%; object-fit: cover; }
.ct-body { display: grid; gap: 16px; padding: 28px; min-width: 0; overflow-wrap: anywhere; }
.ct h3 { font-size: 1.5rem; }
.ct ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .92rem; }
.ct li, .ct li a { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; }
.ct li a:hover { color: var(--ocean); }
.ct svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: none; stroke: var(--ocean); stroke-width: 1.8; }
.ct.pdc svg { stroke: var(--sun-d); }
.ct svg.fill { fill: var(--wa); stroke: none; }
.ct-actions { margin-top: 4px; }

/* CTA */
.cta { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: 170px 0; text-align: center; margin-top: 130px; }
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(15,39,64,.5), rgba(15,39,64,.85)); }
.cta-in { position: relative; display: grid; justify-items: center; gap: 18px; }
.cta h2 { font-size: clamp(2.4rem, 1.5rem + 3vw, 4.2rem); font-weight: 300; }
.cta h2 em { color: var(--sun); }
.cta p { color: rgba(255,255,255,.88); }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 14px; }

/* Rodapé */
.foot { background: var(--navy); color: rgba(255,255,255,.78); padding: 80px 0 0; }
.foot-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 60px; padding-bottom: 56px; border-bottom: 1px solid var(--line-d); }
.foot-brand { display: grid; gap: 20px; align-content: start; }
.foot-brand p { font-size: .92rem; max-width: 36ch; }
.foot .social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-d); display: grid; place-items: center; transition: background-color .3s, border-color .3s; }
.foot .social a:hover { background: var(--sun); border-color: var(--sun); color: var(--navy); }
.social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.foot h3 { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: .9rem; font-weight: 700; color: #fff; margin-bottom: 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--sun); }
.foot-last { display: flex; justify-content: space-between; padding: 24px 0 28px; font-size: .8rem; color: rgba(255,255,255,.5); }

/* WhatsApp */
.wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--wa); display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 30px -8px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transform: translateY(10px); transition: transform .3s var(--ease), opacity .3s; }
.wa-float.show { opacity: 1; pointer-events: auto; transform: none; }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }
body.pop-open .wa-float.show { opacity: 0; pointer-events: none; }
.wa-menu { position: fixed; z-index: 70; width: 310px; padding: 12px; display: grid; gap: 4px; background: #fff; color: var(--ink); border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(15,39,64,.5); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .3s var(--ease); }
.wa-menu.from-top { transform: translateY(-8px); }
.wa-menu.is-open { opacity: 1; transform: none; }
.wa-menu p { padding: 6px 10px 8px; font-size: .84rem; font-weight: 700; color: var(--muted); }
.wa-menu a { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; text-decoration: none; transition: background-color .2s; }
.wa-menu a:hover { background: var(--sand); }
.wa-menu span { display: grid; }
.wa-menu small { color: var(--muted); }

/* Visualizador */
body.vw-lock { overflow: hidden; }
.vw { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-columns: 1fr 400px; background: #0a1a2b; color: #fff; opacity: 0; transition: opacity .3s ease; }
.vw.is-open { opacity: 1; }
.vw[hidden] { display: none; }
.vw.no-panel { grid-template-columns: 1fr; }
.vw.no-panel .vw-panel { display: none; }
.vw-close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 0; color: #fff; cursor: pointer; transition: background-color .3s; }
.vw-close:hover { background: var(--sun); color: var(--navy); }
.vw-close svg, .vw-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.vw-main { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; min-height: 0; min-width: 0; padding: 22px 28px 20px; }
.vw-top { display: flex; align-items: center; gap: 18px; min-height: 48px; padding-right: 64px; }
.vw-count { font-family: var(--serif); font-size: 1.3rem; }
.vw-cap { font-size: .86rem; color: rgba(255,255,255,.75); }
.vw-stage { position: relative; min-height: 0; touch-action: pan-y; user-select: none; }
.vw-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease; }
.vw-stage img.is-loading { opacity: .25; }
.vw-nav { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 0; color: #fff; cursor: pointer; transition: background-color .3s; }
.vw-nav:hover { background: var(--sun); color: var(--navy); }
.vw-prev { left: 0; }
.vw-next { right: 0; }
.vw-thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 3px; }
.vw-thumbs::-webkit-scrollbar { display: none; }
.vw-thumbs button { flex: none; width: 92px; height: 62px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--navy-2); cursor: pointer; opacity: .45; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .3s, outline-color .3s; }
.vw-thumbs button:hover { opacity: .8; }
.vw-thumbs button.is-on { opacity: 1; outline-color: var(--sun); }
.vw-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.vw-panel { display: flex; flex-direction: column; gap: 16px; padding: 88px 36px 32px; background: var(--navy); overflow-y: auto; }
.vw-hotel { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.vw-panel h2 { font-size: 2.3rem; }
.vw-size { font-weight: 700; color: var(--sun); }
.vw-txt { color: rgba(255,255,255,.85); }
.vw-amen { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--line-d); }
.vw-amen li { padding: 11px 0; border-bottom: 1px solid var(--line-d); font-size: .9rem; color: rgba(255,255,255,.8); }
.vw-actions { display: grid; gap: 10px; margin-top: 10px; }
.vw-rooms { display: flex; justify-content: space-between; margin-top: auto; padding-top: 24px; }
.vw-rooms button { background: none; border: 0; border-bottom: 2px solid var(--sun); padding: 0 0 4px; color: var(--sun); font-weight: 700; cursor: pointer; }
.vw-rooms .back::before { content: "← "; }
.vw-rooms button:not(.back)::after { content: " →"; }

/* Entradas suaves */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }

/* ============ Responsivo ============ */
@media (max-width: 1180px) { .menu { gap: 18px; } .menu a { font-size: .8rem; } .hide-sm { display: none; } }
@media (max-width: 1000px) {
  .burger { display: grid; }
  .menu { position: absolute; top: 80px; left: -24px; right: -24px; flex-direction: column; gap: 0; background: var(--navy); padding: 8px 24px 24px; display: none; }
  .menu.open { display: flex; }
  .menu a { padding: 15px 0; border-bottom: 1px solid var(--line-d); font-size: .95rem; }
  .top-cta { margin-left: auto; }
  .booking { grid-template-columns: 1fr 1fr; border-radius: 20px; }
  .bf-btn { border-bottom: 1px solid var(--line); min-height: 70px; padding: 12px 18px; }
  .bf-hotel { grid-column: 1 / -1; border-right: 0; border-radius: 20px 20px 0 0 !important; }
  #btn-guests { grid-column: 1 / -1; border-right: 0; }
  .bf-go { grid-column: 1 / -1; padding: 14px; }
  .bf-go .btn { width: 100%; }
  .pop { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto; width: 100% !important; max-height: 85svh; overflow: auto; border-radius: 20px 20px 0 0; transform: translateY(24px); padding-bottom: max(20px, env(safe-area-inset-bottom)); z-index: 80; }
  .sec { padding: 96px 0; }
  .h-cards, .rest-in, .ev-grid, .ex-info, .voices-in, .ct-grid, .quotes { grid-template-columns: 1fr; gap: 40px; }
  .ex-hl { grid-template-columns: 1fr 1fr; }
  .slider { --per: 2; --gap: 16px; }
  .sl-l { left: 8px; } .sl-r { right: 8px; }
  .pk-grid { grid-template-columns: 1fr 1fr; }
  .rest-pics { grid-template-rows: 280px 190px 190px; }
  .nt-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 220px 220px; }
  .nt-a { grid-column: span 2; grid-row: auto; }
  .nt-d { grid-column: span 2; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .wrap { width: min(var(--wrap), 100% - 36px); }
  .logo img { height: 32px; }
  .logo span { font-size: 1.15rem; }
  .top .btn { min-height: 42px; padding: 0 18px; }
  .hero-in { padding-bottom: 26px; }
  .bf-v { font-size: 1rem; }
  .slider { --per: 1; }
  .ex-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 150px 150px; }
  .mz-0 { grid-column: span 2; grid-row: auto; }
  .ex-hl { grid-template-columns: 1fr; gap: 16px; }
  .h-body { padding: 26px 22px 28px; }
  .feats { grid-template-columns: 1fr; }
  .rest-pics { grid-template-rows: 200px 130px 130px; grid-template-columns: 1fr 1fr; }
  .rp-a { grid-column: span 2; }
  .rp-c, .rp-d, .rp-g { display: none; }
  .ev-pics { height: 420px; }
  .pk-grid { grid-template-columns: 1fr; }
  .nt-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 240px); }
  .nt-a, .nt-d { grid-column: auto; }
  .ct { grid-template-columns: 1fr; }
  .ct img { height: 180px; }
  .foot-in { grid-template-columns: 1fr; }
  .foot-last { flex-direction: column; gap: 6px; padding-bottom: 96px; }
  .vw { display: block; overflow-y: auto; }
  .vw-main { height: 72svh; padding: 12px; }
  .vw-nav { width: 42px; height: 42px; margin-top: -21px; }
  .vw-thumbs button { width: 70px; height: 48px; }
  .vw-panel { padding: 30px 22px 48px; }
  .vw-close { position: fixed; top: 10px; right: 10px; }
  .wa-menu { width: auto; left: 12px; right: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
}