/* =========================================================
   TONOFF — Componentes e layout
   Depende de tokens.css
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--txt-md);
  font-weight: var(--peso-normal);
  line-height: var(--altura-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--cor-link); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--mar-900); color: #fff; padding: 8px 14px; border-radius: var(--raio-sm); }
.pular:focus { left: 8px; }

/* ---------- Tipografia ---------- */
h1, h2, h3 { font-family: var(--fonte-display); font-weight: 400; color: var(--cor-titulo); line-height: var(--altura-titulo); margin: 0; letter-spacing: -0.005em; text-wrap: balance; }
h1 { font-size: var(--txt-hero); }
h2 { font-size: var(--txt-3xl); }
h3 { font-size: var(--txt-xl); }
p { margin: 0 0 1em; text-wrap: pretty; }
.lead { font-size: var(--txt-lg); color: var(--cor-texto-suave); font-weight: var(--peso-leve); max-width: var(--largura-texto); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .75em;
  font-family: var(--fonte-texto); font-size: var(--txt-xs); font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--cor-link); margin-bottom: var(--esp-5);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.on-dark .eyebrow { color: var(--brand-turquesa-claro); }

.assinatura { font-family: var(--fonte-display); }
.assinatura .off { color: inherit; }
.assinatura .on { color: var(--brand-laranja); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--gutter); }
.secao { padding-block: var(--secao-y); position: relative; }
.secao--escura { background: var(--cor-fundo-invertido); color: var(--cor-texto-invertido); }
.secao--escura h2, .secao--escura h3 { color: var(--areia-50); }
.secao--escura .lead { color: rgba(245,241,231,.78); }
.secao--clara { background: var(--areia-50); }
.secao__topo { display: grid; gap: var(--esp-5); margin-bottom: var(--esp-8); max-width: 760px; }
.secao__topo p { margin: 0; }

/* ---------- Botões ---------- */
.btn {
  --btn-bg: var(--cor-cta); --btn-fg: var(--cor-cta-texto); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px; padding: 0 1.6em; border-radius: var(--raio-pill);
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd);
  font: var(--peso-medio) var(--txt-sm)/1 var(--fonte-texto);
  letter-spacing: var(--tracking-botao); text-transform: uppercase; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-rapida), color var(--dur-rapida), border-color var(--dur-rapida), transform var(--dur-rapida) var(--ease-mar), box-shadow var(--dur-media);
}
.btn:hover { --btn-bg: var(--cor-cta-hover); transform: translateY(-1px); box-shadow: var(--sombra-2); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--secundario { --btn-bg: transparent; --btn-fg: var(--mar-900); --btn-bd: var(--mar-900); }
.btn--secundario:hover { --btn-bg: var(--mar-900); --btn-fg: var(--areia-50); box-shadow: none; }
.btn--claro { --btn-bg: transparent; --btn-fg: var(--areia-50); --btn-bd: rgba(245,241,231,.7); }
.btn--claro:hover { --btn-bg: var(--areia-50); --btn-fg: var(--mar-900); box-shadow: none; }
.btn--sm { min-height: 42px; padding: 0 1.2em; font-size: var(--txt-xs); }
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; letter-spacing: .08em; line-height: 1.3; padding-block: .9em; }
  .hero__ctas .btn, .calc .btn, .cta-final .btn { width: 100%; }
}
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background var(--dur-media), box-shadow var(--dur-media), transform var(--dur-media) var(--ease-mar);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-5); height: 80px; }
.header__logo { display: flex; align-items: center; text-decoration: none; }
.header__logo img { height: 44px; width: auto; transition: opacity var(--dur-media); }
.header__logo .logo-txt { font-family: var(--fonte-display); font-size: 1.6rem; letter-spacing: .08em; color: var(--areia-50); position: absolute; transition: opacity var(--dur-media); }
.header:not(.is-solida) .header__logo img { opacity: 0; }
.header.is-solida .header__logo .logo-txt { opacity: 0; }
.nav { display: flex; align-items: center; gap: var(--esp-6); }
.nav a:not(.btn) { color: var(--areia-50); text-decoration: none; font-size: var(--txt-sm); letter-spacing: .06em; position: relative; padding-block: 6px; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right var(--dur-media) var(--ease-mar); }
.nav a:not(.btn):hover::after { right: 0; }
.header .btn { --btn-bg: transparent; --btn-fg: var(--areia-50); --btn-bd: rgba(245,241,231,.7); }
.header.is-solida { background: rgba(245,241,231,.94); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--cor-borda); }
.header.is-solida .nav a:not(.btn) { color: var(--mar-900); }
.header.is-solida .btn { --btn-bg: var(--cor-cta); --btn-fg: var(--cor-cta-texto); --btn-bd: transparent; }
.menu-btn { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; color: var(--areia-50); }
.header.is-solida .menu-btn { color: var(--mar-900); }
.menu-btn span { display: block; width: 24px; height: 1.5px; margin: 6px auto; background: currentColor; transition: transform var(--dur-media), opacity var(--dur-rapida); }

@media (max-width: 960px) {
  .menu-btn { display: block; position: relative; z-index: 60; }
  .nav {
    position: fixed; inset: 0; z-index: 55; flex-direction: column; justify-content: center; gap: var(--esp-6);
    background: var(--mar-900); opacity: 0; visibility: hidden; transition: opacity var(--dur-media), visibility var(--dur-media);
  }
  .nav a:not(.btn) { color: var(--areia-50) !important; font-family: var(--fonte-display); font-size: var(--txt-2xl); letter-spacing: 0; }
  .nav .btn { --btn-bg: var(--cor-cta) !important; --btn-fg: var(--tinta) !important; --btn-bd: transparent !important; margin-top: var(--esp-4); }
  body.menu-aberto { overflow: hidden; }
  /* backdrop-filter cria containing block e prenderia o menu fixo dentro do header */
  body.menu-aberto .header { backdrop-filter: none; background: transparent; box-shadow: none; }
  body.menu-aberto .nav { opacity: 1; visibility: visible; }
  body.menu-aberto .header .menu-btn { color: var(--areia-50); }
  body.menu-aberto .menu-btn span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  body.menu-aberto .menu-btn span:nth-child(2) { opacity: 0; }
  body.menu-aberto .menu-btn span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: var(--areia-50); overflow: hidden; isolation: isolate; }
.hero__img { position: absolute; inset: 0; z-index: -2; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scale(1.06); animation: respira 18s var(--ease-mar) forwards; }
@keyframes respira { to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(7,42,40,.6) 0%, rgba(7,42,40,.25) 45%, rgba(7,42,40,0) 70%),
  linear-gradient(180deg, rgba(7,42,40,.55) 0%, rgba(7,42,40,.05) 35%, rgba(7,42,40,.3) 60%, rgba(7,42,40,.88) 100%); }
.hero__sub { text-shadow: 0 1px 12px rgba(7,42,40,.5); }
.hero__conteudo { padding-block: 140px var(--esp-8); display: grid; gap: var(--esp-5); }
.hero .eyebrow { color: var(--brand-sol); }
.hero h1 { color: var(--areia-50); max-width: 12ch; }
.hero h1 .on { color: var(--brand-sol); }
.hero__sub { font-size: var(--txt-lg); font-weight: var(--peso-leve); max-width: 52ch; color: rgba(245,241,231,.92); margin: 0; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--esp-4); margin-top: var(--esp-3); }
.hero .btn--secundario { --btn-fg: var(--areia-50); --btn-bd: rgba(245,241,231,.7); }
.hero .btn--secundario:hover { --btn-bg: var(--areia-50); --btn-fg: var(--mar-900); }
.dados { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-6); margin: var(--esp-6) 0 0; padding: var(--esp-5) 0 0; border-top: 1px solid rgba(245,241,231,.25); list-style: none; }
.dados li { display: flex; align-items: baseline; gap: .5em; font-size: var(--txt-sm); letter-spacing: .04em; color: rgba(245,241,231,.85); }
.dados strong { font-family: var(--fonte-display); font-weight: 400; font-size: var(--txt-xl); color: var(--areia-50); }

/* ---------- Onda (elemento gráfico da marca) ---------- */
.onda { display: block; width: 100%; height: clamp(40px, 6vw, 90px); color: var(--cor-fundo); }
.onda--topo { position: absolute; left: 0; right: 0; top: -2px; transform: scaleX(-1); }
.onda--base { position: absolute; left: 0; right: 0; bottom: -2px; }

/* ---------- Sol (motivo do logo) ---------- */
.sol { width: 56px; height: 40px; color: var(--brand-laranja); }

/* ---------- Manifesto ---------- */
.manifesto { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--esp-8); align-items: center; }
.manifesto__fotos { position: relative; aspect-ratio: 4/5; }
.manifesto h2 { margin-bottom: var(--esp-5); }
.manifesto .assinatura-grande { font-family: var(--fonte-display); font-size: var(--txt-xl); color: var(--mar-700); margin-top: var(--esp-6); }
@media (max-width: 860px) { .manifesto { grid-template-columns: 1fr; } .manifesto__fotos { aspect-ratio: 1/1; } }

/* ---------- Apartamentos ---------- */
.apto { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--esp-8); align-items: start; }
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4) var(--esp-6); }
.lista-check li { display: grid; grid-template-columns: 22px 1fr; gap: var(--esp-3); align-items: start; padding-bottom: var(--esp-4); border-bottom: var(--borda); font-size: var(--txt-md); }
.lista-check svg { width: 22px; height: 22px; color: var(--brand-teal); margin-top: 2px; }
@media (max-width: 860px) { .apto { grid-template-columns: 1fr; gap: var(--esp-6); } }
@media (max-width: 520px) { .lista-check { grid-template-columns: 1fr; } }

/* ---------- Grupos ---------- */
.grupos { overflow: hidden; }
.grupos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-8); align-items: center; }
.predio { display: flex; flex-direction: column; gap: 8px; max-width: 300px; margin-inline: auto; padding: 28px 22px 0; border: 1px solid rgba(124,214,210,.3); border-bottom: 0; border-radius: 120px 120px 0 0; position: relative; }
.predio::before { content: "BAYSIDE"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--mar-900); padding: 0 12px; font-family: var(--fonte-texto); letter-spacing: .3em; font-size: var(--txt-xs); color: var(--brand-turquesa-claro); }
.predio::after { content: ""; display: block; height: 3px; margin: 6px -22px 0; background: var(--brand-turquesa); border-radius: 2px; }
.predio__andar { display: flex; align-items: stretch; gap: 8px; }
.predio__n { flex: none; width: 34px; display: grid; place-items: center; font-size: var(--txt-xs); color: rgba(245,241,231,.55); letter-spacing: .04em; }
.predio__apto { flex: 0 0 calc((100% - 34px - 16px) / 2); min-height: 52px; border-radius: var(--raio-sm); border: 1px solid rgba(124,214,210,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--txt-sm); letter-spacing: .08em; color: rgba(245,241,231,.6); transition: background var(--dur-media) var(--ease-mar), color var(--dur-media), border-color var(--dur-media); }
.predio__apto small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.predio__apto.is-ativo { background: var(--brand-turquesa); border-color: var(--brand-turquesa); color: var(--mar-950); font-weight: var(--peso-medio); }
.predio__andar + .predio__andar { margin-top: 0; }
.calc { margin-top: var(--esp-6); padding: var(--esp-6); background: rgba(255,255,255,.05); border: 1px solid rgba(124,214,210,.22); border-radius: var(--raio-lg); }
.calc label { display: block; font-size: var(--txt-sm); letter-spacing: .06em; margin-bottom: var(--esp-3); color: rgba(245,241,231,.85); }
.calc__linha { display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap; }
.stepper { display: inline-flex; align-items: center; border: 1px solid rgba(245,241,231,.4); border-radius: var(--raio-pill); }
.stepper button { width: 48px; height: 48px; border: 0; background: none; color: var(--areia-50); font-size: 1.4rem; cursor: pointer; border-radius: 50%; }
.stepper button:hover { background: rgba(255,255,255,.08); }
.stepper input { width: 64px; text-align: center; background: none; border: 0; color: var(--areia-50); font: 400 var(--txt-xl) var(--fonte-display); -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.calc__resultado { font-size: var(--txt-md); color: rgba(245,241,231,.9); margin: var(--esp-4) 0 var(--esp-5); min-height: 3.3em; }
.calc__resultado strong { color: var(--brand-sol); font-weight: var(--peso-medio); }
.beneficios { list-style: none; padding: 0; margin: var(--esp-7) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-6); }
.beneficios h3 { font-size: var(--txt-lg); margin-bottom: var(--esp-2); color: var(--brand-turquesa-claro) !important; }
.beneficios p { color: rgba(245,241,231,.78); font-size: var(--txt-md); margin: 0; }
@media (max-width: 900px) { .grupos__grid { grid-template-columns: 1fr; } .beneficios { grid-template-columns: 1fr; gap: var(--esp-5); } }

/* ---------- Experiências ---------- */
.servicos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-5); }
.servico { background: var(--areia-50); border: var(--borda); border-radius: var(--raio-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-media) var(--ease-mar), box-shadow var(--dur-media); }
.servico:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.servico__visual { aspect-ratio: 4/3; position: relative; overflow: hidden; display: grid; place-items: center; }
.servico__visual img { width: 100%; height: 100%; object-fit: cover; }
.servico__visual--ilustra { background: var(--mar-900); }
.servico__visual .cena { position: absolute; inset: 0; width: 100%; height: 100%; }
.servico__icone { position: absolute; left: 16px; bottom: -22px; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-laranja); display: grid; place-items: center; color: var(--tinta); box-shadow: var(--sombra-1); z-index: 1; }
.servico__icone svg { width: 24px; height: 24px; }
.servico__corpo { padding: var(--esp-7) var(--esp-5) var(--esp-5); }
.servico h3 { font-size: var(--txt-lg); margin-bottom: var(--esp-2); }
.servico p { color: var(--cor-texto-suave); font-size: var(--txt-sm); line-height: 1.6; margin: 0; }
.nota { font-size: var(--txt-sm); color: var(--cor-texto-suave); margin-top: var(--esp-6); }
@media (max-width: 1080px) { .servicos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .servicos { grid-template-columns: 1fr; } }

/* ---------- Estrutura (faixa horizontal) ---------- */
.estrutura { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-4); }
.estrutura figure { margin: 0; }
.estrutura img { aspect-ratio: 3/4; object-fit: cover; border-radius: var(--raio-md); width: 100%; }
.estrutura figcaption { margin-top: var(--esp-3); font-size: var(--txt-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--mar-900); }
@media (max-width: 760px) {
  .estrutura { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--esp-3); }
  .estrutura figure { scroll-snap-align: start; }
}

/* ---------- Aracaju ---------- */
.local { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-8); align-items: center; }
.local__foto { position: relative; }
.local__foto img { border-radius: 200px 200px var(--raio-lg) var(--raio-lg); aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.distancias { list-style: none; padding: 0; margin: var(--esp-6) 0 0; }
.distancias li { display: flex; justify-content: space-between; gap: var(--esp-4); padding: var(--esp-4) 0; border-bottom: var(--borda); }
.distancias span:last-child { color: var(--cor-texto-suave); font-size: var(--txt-sm); white-space: nowrap; }
@media (max-width: 860px) { .local { grid-template-columns: 1fr; } .local__foto { max-width: 420px; } }

/* ---------- Como reservar ---------- */
.passos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-6); counter-reset: passo; }
.passos li { counter-increment: passo; padding-top: var(--esp-5); border-top: 1px solid var(--cor-borda-forte); }
.passos li::before { content: "0" counter(passo); display: block; font-family: var(--fonte-display); font-size: var(--txt-2xl); color: var(--brand-laranja); margin-bottom: var(--esp-3); }
.passos h3 { font-size: var(--txt-lg); margin-bottom: var(--esp-2); }
.passos p { color: var(--cor-texto-suave); margin: 0; }
@media (max-width: 760px) { .passos { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; }
.faq details { border-bottom: var(--borda); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--esp-4); padding: var(--esp-5) 0; font-family: var(--fonte-display); font-size: var(--txt-lg); color: var(--mar-900); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat, linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat; transition: transform var(--dur-media) var(--ease-mar); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--cor-texto-suave); padding-bottom: var(--esp-5); margin: 0; max-width: var(--largura-texto); }

/* ---------- CTA final ---------- */
.cta-final { position: relative; text-align: center; color: var(--areia-50); overflow: hidden; isolation: isolate; padding-block: calc(var(--secao-y) * 1.4); }
.cta-final img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-final::after { content: ""; position: absolute; inset: 0; background: rgba(7,42,40,.62); z-index: -1; }
.cta-final h2 { color: var(--areia-50); margin-bottom: var(--esp-4); }
.cta-final h2 .on { color: var(--brand-sol); }
.cta-final p { max-width: 46ch; margin: 0 auto var(--esp-6); font-size: var(--txt-lg); font-weight: var(--peso-leve); }

/* ---------- Footer ---------- */
.footer { background: var(--mar-950); color: rgba(245,241,231,.75); padding-block: var(--esp-8) var(--esp-6); font-size: var(--txt-sm); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--esp-7); }
.footer__marca { font-family: var(--fonte-display); font-size: 2rem; letter-spacing: .1em; color: var(--areia-50); }
.footer__marca + p { font-family: var(--fonte-texto); letter-spacing: var(--tracking-eyebrow); font-size: var(--txt-xs); text-transform: uppercase; margin-top: var(--esp-3); line-height: 2; }
.footer__marca + p span { color: var(--brand-laranja); }
.footer h3 { font-family: var(--fonte-texto); font-size: var(--txt-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-turquesa-claro); margin-bottom: var(--esp-4); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--esp-2); }
.footer a { color: rgba(245,241,231,.85); text-decoration: none; }
.footer a:hover { color: var(--brand-sol); }
.footer__base { margin-top: var(--esp-8); padding-top: var(--esp-5); border-top: 1px solid rgba(245,241,231,.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--esp-3); font-size: var(--txt-xs); }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- WhatsApp flutuante ---------- */
.wpp { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px; border-radius: var(--raio-pill); background: var(--mar-900); color: var(--areia-50); text-decoration: none; font-size: var(--txt-sm); letter-spacing: .04em; box-shadow: var(--sombra-3); transition: transform var(--dur-media) var(--ease-mar), opacity var(--dur-media); }
.wpp svg { width: 26px; height: 26px; color: var(--brand-turquesa); }
.wpp:hover { transform: translateY(-2px); }
.wpp.is-oculto { opacity: 0; transform: translateY(20px); pointer-events: none; }
@media (max-width: 560px) { .wpp span { display: none; } .wpp { width: 56px; padding: 0; justify-content: center; } }

/* ---------- Revelar ao rolar ---------- */
.revela { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-lenta) var(--ease-mar), transform var(--dur-lenta) var(--ease-mar); }
.revela.is-visivel { opacity: 1; transform: none; }
.no-js .revela { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .revela { opacity: 1; transform: none; } .hero__img img { animation: none; transform: none; } }

/* =========================================================
   Páginas internas, cards de apartamento, reservas e empresas
   ========================================================= */
.pagina-interna main { padding-top: 80px; }
.pagina-topo { padding-block: var(--esp-8) var(--esp-6); }
.pagina-topo h1 { font-size: var(--txt-3xl); max-width: 18ch; margin-bottom: var(--esp-4); }
.migalhas { font-size: var(--txt-sm); color: var(--cor-texto-suave); margin-bottom: var(--esp-5); }
.migalhas a { color: var(--cor-link); text-decoration: none; }
.pagina-topo--foto { position: relative; isolation: isolate; color: var(--areia-50); padding-block: var(--esp-9); overflow: hidden; }
.pagina-topo--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,42,40,.88) 0%, rgba(7,42,40,.6) 55%, rgba(7,42,40,.3) 100%); }
.pagina-topo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pagina-topo--foto h1 { color: var(--areia-50); max-width: 16ch; }
.pagina-topo--foto h1 .on { color: var(--brand-sol); }
.pagina-topo--foto .lead { color: rgba(245,241,231,.88); margin-bottom: var(--esp-6); }
.pagina-topo--foto .eyebrow { color: var(--brand-sol); }
.pagina-topo--foto .migalhas, .pagina-topo--foto .migalhas a { color: rgba(245,241,231,.75); }

/* ---------- Slider de cards ---------- */
.aptos__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--esp-6); flex-wrap: wrap; margin-bottom: var(--esp-6); }
.aptos__topo > div { max-width: 640px; }
.slider__controles { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--esp-4); }
.slider__dica { font-size: var(--txt-sm); color: var(--cor-texto-suave); }
.slider__seta { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cor-borda-forte); background: var(--areia-50); color: var(--mar-900); font-size: 1.4rem; cursor: pointer; margin-left: 6px; transition: background var(--dur-rapida), opacity var(--dur-rapida); }
.slider__seta:hover:not(:disabled) { background: var(--mar-900); color: var(--areia-50); }
.slider__seta:disabled { opacity: .35; cursor: default; }
.slider__trilho { list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) var(--esp-4); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 30%, 360px); column-gap: var(--esp-5); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.slider__trilho::-webkit-scrollbar { display: none; }
.slider__trilho > li { scroll-snap-align: start; }
@media (max-width: 560px) { .slider__trilho { grid-auto-columns: 84%; } .slider__controles > div { display: none; } }
.lista-check--linha { grid-template-columns: repeat(4, 1fr); margin-top: var(--esp-6); }
@media (max-width: 900px) { .lista-check--linha { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lista-check--linha { grid-template-columns: 1fr; } }
.lista-check--uma { grid-template-columns: 1fr; gap: var(--esp-3); margin: var(--esp-5) 0; }

/* ---------- Card de apartamento ---------- */
.card-apto { display: flex; flex-direction: column; }
.card-apto__corpo { padding: var(--esp-4) 2px 0; display: flex; flex-direction: column; flex: 1; }
.card-apto__titulo { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); }
.card-apto h3 { font-size: var(--txt-lg); }
.card-apto__andar { font-size: var(--txt-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--mar-700); white-space: nowrap; }
.card-apto__destaque { color: var(--cor-texto); margin: var(--esp-1) 0 0; font-size: var(--txt-md); }
.card-apto__specs { color: var(--cor-texto-suave); font-size: var(--txt-sm); margin: var(--esp-1) 0 var(--esp-4); }
.card-apto__link { margin-top: auto; color: var(--mar-700); font-weight: var(--peso-medio); text-decoration: none; font-size: var(--txt-sm); letter-spacing: .04em; }
.card-apto__link:hover { text-decoration: underline; }
.card-apto__acoes { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding-top: var(--esp-3); border-top: var(--borda); }
.card-apto__detalhes { background: none; border: 0; padding: 8px 0; font: var(--peso-medio) var(--txt-sm) var(--fonte-texto); color: var(--mar-900); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.card-apto__selecionar { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--txt-sm); }
.card-apto__selecionar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.card-apto__selecionar span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--raio-pill); border: 1.5px solid var(--mar-900); color: var(--mar-900); transition: background var(--dur-rapida), color var(--dur-rapida); }
.card-apto__selecionar span::before { content: "+"; font-size: 1.1em; line-height: 1; }
.card-apto__selecionar input:checked + span { background: var(--mar-900); color: var(--areia-50); }
.card-apto__selecionar input:checked + span::before { content: "✓"; }
.card-apto__selecionar input:focus-visible + span { outline: 3px solid var(--cor-foco); outline-offset: 3px; }
.card-apto:has(input:checked) .carrossel { box-shadow: 0 0 0 3px var(--brand-turquesa); }
.card-apto__selecionar em { font-style: normal; }
.card-apto__selecionar .sel-on, .card-apto__selecionar input:checked + span .sel-off { display: none; }
.card-apto__selecionar input:checked + span .sel-on { display: inline; }
.card-apto__selecionar--grande span { padding: 12px 20px; }

/* ---------- Carrossel de fotos ---------- */
.carrossel { position: relative; border-radius: var(--raio-md); overflow: hidden; aspect-ratio: 4/3; background: var(--areia-200); transition: box-shadow var(--dur-media); }
.carrossel__trilho { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__item { flex: 0 0 100%; scroll-snap-align: start; }
.carrossel__item img { width: 100%; height: 100%; object-fit: cover; }
.carrossel__seta { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(251,249,244,.92); color: var(--mar-900); font-size: 1.25rem; line-height: 1; cursor: pointer; box-shadow: var(--sombra-1); opacity: 0; transition: opacity var(--dur-rapida); }
.carrossel__seta--ant { left: 10px; } .carrossel__seta--prox { right: 10px; }
.carrossel:hover .carrossel__seta, .carrossel__seta:focus-visible { opacity: 1; }
.carrossel.is-inicio .carrossel__seta--ant, .carrossel.is-fim .carrossel__seta--prox { opacity: 0; pointer-events: none; }
@media (hover: none) { .carrossel__seta { display: none; } }
.carrossel__pontos { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.carrossel__ponto { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); transition: transform var(--dur-rapida), background var(--dur-rapida); }
.carrossel__ponto.is-ativo { background: #fff; transform: scale(1.25); }
.card-apto__selo { position: absolute; top: 12px; left: 12px; background: rgba(251,249,244,.94); color: var(--mar-900); font-size: var(--txt-xs); font-weight: var(--peso-medio); letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--raio-pill); }

/* ---------- Busca (datas e hóspedes) ---------- */
.busca-wrap { position: sticky; top: 80px; z-index: 30; background: rgba(245,241,231,.96); backdrop-filter: blur(10px); border-block: var(--borda); padding-block: var(--esp-3); }
.busca { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)) 1fr; gap: var(--esp-3); align-items: center; }
.busca__campo { min-width: 0; display: flex; flex-direction: column; background: var(--areia-0); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-md); padding: 8px 14px; }
.busca__campo:focus-within { border-color: var(--mar-700); box-shadow: 0 0 0 3px var(--mar-100); }
.busca__campo label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cor-texto-suave); font-weight: var(--peso-medio); }
.busca__campo input, .busca__campo select { border: 0; background: none; font: var(--txt-md) var(--fonte-texto); color: var(--cor-texto); padding: 2px 0; min-height: 28px; width: 100%; min-width: 0; }
.busca__campo input { -webkit-appearance: none; appearance: none; }
.busca__campo input:focus, .busca__campo select:focus { outline: none; }
.busca__resumo { margin: 0; padding-left: var(--esp-3); font-size: var(--txt-sm); color: var(--cor-texto-suave); }
.busca__resumo strong { color: var(--mar-900); font-weight: var(--peso-medio); }
@media (max-width: 860px) {
  .busca { grid-template-columns: 1fr 1fr 1fr; }
  .busca__resumo { grid-column: 1 / -1; padding: 0; }
}
@media (max-width: 560px) {
  .busca-wrap { position: static; }
  .busca { grid-template-columns: 1fr 1fr; gap: var(--esp-2); }
  .busca__campo { padding: 8px 10px; }
  .busca__campo input { font-size: var(--txt-sm); }
  .busca__campo:nth-child(3) { grid-column: 1 / -1; }
}

/* ---------- Lista de apartamentos ---------- */
.secao--aptos { padding-top: var(--esp-7); }
.lista-topo { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--esp-3); margin-bottom: var(--esp-6); }
.lista-topo h2 { font-size: var(--txt-xl); }
.lista-topo p { margin: 0; color: var(--cor-texto-suave); font-size: var(--txt-sm); }
.grade-aptos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--esp-7) var(--esp-5); }
.ajuda { margin-top: var(--esp-8); padding: var(--esp-6); border-radius: var(--raio-lg); background: var(--mar-50); display: flex; justify-content: space-between; align-items: center; gap: var(--esp-5); flex-wrap: wrap; }
.ajuda h3 { font-size: var(--txt-xl); margin-bottom: var(--esp-2); }
.ajuda p { margin: 0; color: var(--cor-texto-suave); max-width: 52ch; }
.politicas dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-5); margin: var(--esp-6) 0 0; }
.politicas dt { font-size: var(--txt-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--mar-700); margin-bottom: var(--esp-2); }
.politicas dd { margin: 0; font-family: var(--fonte-display); font-size: var(--txt-lg); color: var(--mar-900); }
@media (max-width: 760px) { .politicas dl { grid-template-columns: 1fr 1fr; } }

/* ---------- Barra de cotação ---------- */
.cotacao { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--mar-900); color: var(--areia-50); box-shadow: 0 -10px 30px rgba(7,42,40,.25); animation: sobe var(--dur-media) var(--ease-mar); }
@keyframes sobe { from { transform: translateY(100%); } }
.cotacao__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); padding-block: var(--esp-4); }
.cotacao__info { display: flex; flex-direction: column; min-width: 0; }
.cotacao__info strong { font-family: var(--fonte-display); font-weight: 400; font-size: var(--txt-lg); }
.cotacao__info span { font-size: var(--txt-sm); color: var(--brand-turquesa-claro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cotacao__acoes { display: flex; align-items: center; gap: var(--esp-4); flex: none; }
.cotacao__limpar { background: none; border: 0; color: rgba(245,241,231,.8); text-decoration: underline; cursor: pointer; font: var(--txt-sm) var(--fonte-texto); padding: 8px; }
body.tem-cotacao .wpp { display: none; }
body.tem-cotacao .footer { padding-bottom: 120px; }
@media (max-width: 560px) {
  .cotacao__inner { flex-direction: column; align-items: stretch; gap: var(--esp-3); }
  .cotacao__acoes { justify-content: space-between; }
  .cotacao .btn { flex: 1; width: auto; }
}

/* ---------- Modal de detalhes ---------- */
.detalhes { border: 0; padding: 0; width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border-radius: var(--raio-lg); background: var(--areia-50); color: var(--cor-texto); box-shadow: var(--sombra-3); overflow: auto; }
.detalhes[open] { display: grid; grid-template-columns: 1.5fr 1fr; }
.detalhes::backdrop { background: rgba(7,42,40,.7); backdrop-filter: blur(4px); }
.detalhes__fechar { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(251,249,244,.94); color: var(--mar-900); font-size: 1.6rem; cursor: pointer; box-shadow: var(--sombra-1); }
.detalhes__galeria { padding: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.detalhes__foto { position: relative; aspect-ratio: 3/2; border-radius: var(--raio-md); overflow: hidden; background: var(--areia-200); }
.detalhes__foto img { width: 100%; height: 100%; object-fit: cover; }
.detalhes__ant, .detalhes__prox { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(251,249,244,.92); color: var(--mar-900); font-size: 1.4rem; cursor: pointer; }
.detalhes__ant { left: 12px; } .detalhes__prox { right: 12px; }
.detalhes__minis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.detalhes__minis button { padding: 0; border: 2px solid transparent; border-radius: var(--raio-sm); overflow: hidden; aspect-ratio: 1; cursor: pointer; background: none; opacity: .65; transition: opacity var(--dur-rapida), border-color var(--dur-rapida); }
.detalhes__minis button[aria-current="true"] { border-color: var(--mar-900); opacity: 1; }
.detalhes__minis img { width: 100%; height: 100%; object-fit: cover; }
.detalhes__info { padding: var(--esp-7) var(--esp-6) var(--esp-6) var(--esp-4); display: flex; flex-direction: column; align-items: flex-start; }
.detalhes__info h2 { font-size: var(--txt-2xl); }
.detalhes__sub { color: var(--cor-texto-suave); margin: var(--esp-2) 0 0; }
.detalhes__info .btn { margin-top: var(--esp-4); }
@media (max-width: 820px) {
  .detalhes[open] { grid-template-columns: 1fr; }
  .detalhes__info { padding: 0 var(--esp-5) var(--esp-6); }
}

/* ---------- Faixa empresas (home) ---------- */
.faixa-empresas__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-8); align-items: center; }
.faixa-empresas__foto img { border-radius: var(--raio-lg); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
@media (max-width: 860px) { .faixa-empresas__grid { grid-template-columns: 1fr; gap: var(--esp-6); } }

/* ---------- Página empresas ---------- */
.formatos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-5); }
.formatos li { padding: var(--esp-5); border-radius: var(--raio-lg); background: var(--areia-50); border: var(--borda); }
.formatos h3 { font-size: var(--txt-lg); margin-bottom: var(--esp-2); }
.formatos p { margin: 0; color: var(--cor-texto-suave); font-size: var(--txt-sm); }
.beneficios--4 { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
@media (max-width: 1000px) { .formatos, .beneficios--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .formatos, .beneficios--4 { grid-template-columns: 1fr; } }

.form-corp { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--esp-8); align-items: start; }
@media (max-width: 900px) { .form-corp { grid-template-columns: 1fr; gap: var(--esp-6); } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4); background: var(--areia-0); padding: var(--esp-6); border-radius: var(--raio-lg); box-shadow: var(--sombra-2); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo--inteiro { grid-column: 1 / -1; }
.campo label { font-size: var(--txt-sm); font-weight: var(--peso-medio); color: var(--mar-900); }
.campo label span { font-weight: var(--peso-normal); color: var(--cor-texto-suave); }
.campo input, .campo select, .campo textarea { font: var(--txt-md) var(--fonte-texto); color: var(--cor-texto); background: var(--areia-50); border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-sm); padding: 12px 14px; min-height: 48px; width: 100%; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--mar-700); box-shadow: 0 0 0 3px var(--mar-100); }
.campo [aria-invalid="true"] { border-color: var(--cor-erro); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-block; padding: 8px 16px; border-radius: var(--raio-pill); border: 1px solid var(--cor-borda-forte); font-size: var(--txt-sm); font-weight: var(--peso-normal); color: var(--cor-texto); transition: background var(--dur-rapida), color var(--dur-rapida); }
.chips input:checked + span { background: var(--mar-900); border-color: var(--mar-900); color: var(--areia-50); }
.chips input:focus-visible + span { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.form__erro { grid-column: 1 / -1; margin: 0; padding: 12px 14px; border-radius: var(--raio-sm); background: #FBEAE8; color: var(--cor-erro); font-size: var(--txt-sm); }
.form__acoes { display: flex; gap: var(--esp-3); flex-wrap: wrap; margin-top: var(--esp-2); }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; padding: var(--esp-5); } .form__acoes .btn { width: 100%; } }

/* =========================================================
   Reserva guiada (4 etapas)
   ========================================================= */
.pagina-topo--compacta { padding-bottom: var(--esp-5); }
.pagina-topo--compacta h1 { max-width: 22ch; }

/* Indicador de etapas */
.etapas-wrap { position: sticky; top: 80px; z-index: 30; background: rgba(245,241,231,.96); backdrop-filter: blur(10px); border-block: var(--borda); }
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: none; }
.etapas li { position: relative; }
.etapas li + li::before { content: ""; position: absolute; left: -50%; right: 50%; top: 50%; height: 1px; background: var(--cor-borda-forte); z-index: -1; }
.etapas button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 4px; background: none; border: 0; font: var(--txt-sm) var(--fonte-texto); color: var(--cor-texto-suave); cursor: pointer; }
.etapas button:disabled { cursor: default; }
.etapas__n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--cor-borda-forte); background: var(--areia-100); font-weight: var(--peso-medio); transition: background var(--dur-media), border-color var(--dur-media), color var(--dur-media); }
.etapas .is-atual button { color: var(--mar-900); font-weight: var(--peso-medio); }
.etapas .is-atual .etapas__n { background: var(--mar-900); border-color: var(--mar-900); color: var(--areia-50); }
.etapas .is-feita .etapas__n { background: var(--brand-turquesa); border-color: var(--brand-turquesa); color: var(--mar-950); font-size: 0; }
.etapas .is-feita .etapas__n::after { content: "✓"; font-size: 14px; }
.etapas .is-feita button:hover .etapas__txt { text-decoration: underline; }
.etapas .is-pulada { opacity: .45; }
.etapas .is-pulada .etapas__txt::after { content: " (não precisa)"; }
@media (max-width: 760px) {
  .etapas__txt { display: none; }
  .etapas .is-atual .etapas__txt { display: inline; }
  .etapas .is-pulada .etapas__txt::after { content: ""; }
}

/* Etapas */
.secao--reserva { padding-top: var(--esp-7); }
.etapa { border: 0; margin: 0; padding: 0; min-width: 0; }
.etapa[hidden] { display: none; }
.etapa__topo { margin-bottom: var(--esp-6); max-width: 760px; }
.etapa__topo h2 { font-size: var(--txt-2xl); outline: none; }
.etapa__topo .lead { margin: var(--esp-3) 0 0; }
.etapa__topo--linha { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--esp-5); flex-wrap: wrap; }
.etapa__topo--linha > div { max-width: 760px; }
.etapa__acoes { display: flex; justify-content: space-between; gap: var(--esp-4); margin-top: var(--esp-7); padding-top: var(--esp-5); border-top: var(--borda); }
@media (max-width: 560px) { .etapa__acoes .btn { width: auto; flex: 1; } .etapa__acoes > span { display: none; } }
.etapa__acoes--desktop { display: none; }

.etapa1 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-5); }
@media (max-width: 860px) { .etapa1 { grid-template-columns: 1fr; } }
.painel { background: var(--areia-0); border: var(--borda); border-radius: var(--raio-lg); padding: var(--esp-6); }
.painel__titulo { font-family: var(--fonte-texto); font-size: var(--txt-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--mar-700); margin-bottom: var(--esp-4); }
.painel__nota { margin: var(--esp-3) 0 0; font-size: var(--txt-sm); color: var(--cor-texto-suave); min-height: 1.5em; }
.datas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); }
.datas input:disabled { opacity: .4; }
.opcao-linha { display: flex; align-items: center; gap: 10px; margin-top: var(--esp-4); font-size: var(--txt-sm); cursor: pointer; }
.opcao-linha input { width: 20px; height: 20px; accent-color: var(--mar-900); }

.contador { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); padding-block: var(--esp-3); }
.contador + .contador { border-top: var(--borda); }
.contador strong { display: block; font-weight: var(--peso-medio); color: var(--mar-900); }
.contador span { font-size: var(--txt-sm); color: var(--cor-texto-suave); }
.stepper--claro { border-color: var(--cor-borda-forte); }
.stepper--claro button { color: var(--mar-900); }
.stepper--claro button:hover { background: var(--mar-50); }
.stepper--claro input { color: var(--mar-900); }

.regra { display: flex; gap: var(--esp-4); align-items: flex-start; margin-top: var(--esp-5); padding: var(--esp-4) var(--esp-5); border-radius: var(--raio-md); background: var(--mar-50); color: var(--mar-900); font-size: var(--txt-sm); }
.regra svg { flex: none; width: 28px; height: 28px; color: var(--mar-700); margin-top: 2px; }
.regra p { margin: 0; }
.regra strong { font-weight: var(--peso-medio); }

.aviso { margin-top: var(--esp-4); border-radius: var(--raio-md); font-size: var(--txt-md); }
.aviso:empty { display: none; }
.aviso--ok, .aviso--atencao, .aviso--alerta { padding: var(--esp-4) var(--esp-5); border-left: 4px solid; }
.aviso--ok { background: #E9F5EF; border-color: var(--cor-sucesso); }
.aviso--atencao { background: #FFF3E3; border-color: var(--brand-laranja); }
.aviso--alerta { background: #FBEAE8; border-color: var(--cor-erro); }
.aviso strong { font-weight: var(--peso-medio); color: var(--mar-900); }

/* Etapa 2 — opções de acomodação */
.opcoes-acomodacao { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-5); }
@media (max-width: 760px) { .opcoes-acomodacao { grid-template-columns: 1fr; } }
.opcao { cursor: pointer; display: block; }
.opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcao__corpo { position: relative; height: 100%; display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-6); border-radius: var(--raio-lg); border: 2px solid var(--cor-borda); background: var(--areia-0); transition: border-color var(--dur-rapida), box-shadow var(--dur-media); }
.opcao:hover .opcao__corpo { border-color: var(--cor-borda-forte); }
.opcao input:checked + .opcao__corpo { border-color: var(--mar-900); box-shadow: var(--sombra-2); }
.opcao input:checked + .opcao__corpo::after { content: "✓"; position: absolute; top: 20px; right: 20px; width: 28px; height: 28px; border-radius: 50%; background: var(--mar-900); color: var(--areia-50); display: grid; place-items: center; font-size: 14px; }
.opcao input:focus-visible + .opcao__corpo { outline: 3px solid var(--cor-foco); outline-offset: 3px; }
.opcao.is-desabilitada { cursor: not-allowed; opacity: .55; }
.opcao__selo { align-self: flex-start; font-size: var(--txt-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: var(--peso-medio); background: var(--brand-sol); color: var(--tinta); padding: 4px 10px; border-radius: var(--raio-pill); }
.opcao__titulo { font-size: var(--txt-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--mar-700); font-weight: var(--peso-medio); }
.opcao__qtd { font-family: var(--fonte-display); font-size: var(--txt-2xl); color: var(--mar-900); line-height: 1.1; }
.opcao__aptos { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--esp-2) 0; }
.opcao__aptos i { position: relative; width: 44px; height: 36px; border-radius: 6px; border: 1.5px solid var(--mar-700); background: linear-gradient(to top, var(--brand-turquesa) calc(min(var(--p), 4) / 6 * 100%), transparent 0); display: grid; place-items: center; }
.opcao__aptos i::after { content: ""; position: absolute; inset: auto 0 0 0; height: calc(max(var(--p) - 4, 0) / 6 * 100%); bottom: calc(4 / 6 * 100%); background: var(--brand-laranja); }
.opcao__aptos b { position: relative; z-index: 1; font-size: var(--txt-xs); font-weight: var(--peso-medio); color: var(--mar-950); font-style: normal; }
.opcao__texto { color: var(--cor-texto-suave); font-size: var(--txt-sm); }

/* Etapa 3 — cards bloqueados quando o limite foi atingido */
.card-apto.is-bloqueado .carrossel { opacity: .55; }
.card-apto.is-bloqueado .card-apto__selecionar { opacity: .4; cursor: not-allowed; }
.detalhes__limite { margin: var(--esp-3) 0 0; font-size: var(--txt-sm); color: var(--sol-700); }

/* Etapa 4 — revisão */
.revisao { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-6); align-items: start; }
@media (max-width: 860px) { .revisao { grid-template-columns: 1fr; } }
.resumo { margin: 0; background: var(--mar-900); color: var(--areia-50); border-radius: var(--raio-lg); padding: var(--esp-3) var(--esp-6); }
.resumo > div { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--esp-4); padding-block: var(--esp-4); border-bottom: 1px solid rgba(245,241,231,.15); }
.resumo > div:last-child { border-bottom: 0; }
.resumo dt { font-size: var(--txt-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-turquesa-claro); grid-column: 1; }
.resumo dd { margin: 0; font-family: var(--fonte-display); font-size: var(--txt-lg); grid-column: 1; }
.resumo__alterar { grid-column: 2; grid-row: 1 / span 2; align-self: center; background: none; border: 0; color: rgba(245,241,231,.8); text-decoration: underline; cursor: pointer; font: var(--txt-sm) var(--fonte-texto); padding: 8px; }
.resumo__alterar:hover { color: var(--brand-sol); }
.legenda-aptos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: var(--esp-4) 0 0; font-size: var(--txt-sm); color: var(--cor-texto-suave); }
.legenda-aptos span { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.legenda-aptos__suite { background: var(--brand-turquesa); }
.legenda-aptos__sofa { background: var(--brand-laranja); margin-left: var(--esp-4); }
@media (max-width: 560px) { .painel, .opcao__corpo { padding: var(--esp-5); } .resumo { padding-inline: var(--esp-5); } }

/* Filtro por tipo e selo de banheiros */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--esp-6); }
.filtros button { padding: 8px 16px; border-radius: var(--raio-pill); border: 1px solid var(--cor-borda-forte); background: var(--areia-0); font: var(--txt-sm) var(--fonte-texto); color: var(--cor-texto); cursor: pointer; }
.filtros button[aria-pressed="true"] { background: var(--mar-900); border-color: var(--mar-900); color: var(--areia-50); }
.card-apto[hidden] { display: none; }
.card-apto__tipo { position: absolute; top: 12px; right: 12px; background: rgba(11,63,61,.88); color: var(--areia-50); font-size: var(--txt-xs); letter-spacing: .06em; padding: 6px 12px; border-radius: var(--raio-pill); }

/* =========================================================
   Fotos por orientação
   PC: molduras horizontais · celular: molduras verticais
   ========================================================= */
picture { display: contents; }
.carrossel { aspect-ratio: 3/2; }
.carrossel__total { position: absolute; right: 12px; bottom: 10px; font-size: 11px; letter-spacing: .06em; color: #fff; background: rgba(7,42,40,.55); padding: 3px 8px; border-radius: var(--raio-pill); pointer-events: none; }
.card-apto__tipo { top: 12px; right: 12px; }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .carrossel { aspect-ratio: 4/5; }
}

/* Estrutura do Bayside */
.slider__trilho--estrutura { grid-auto-columns: clamp(280px, 36%, 460px); }
.slider__trilho--estrutura figure { margin: 0; }
.slider__trilho--estrutura img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--raio-md); }
.slider__trilho--estrutura figcaption { margin-top: var(--esp-3); font-size: var(--txt-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--mar-900); }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .slider__trilho--estrutura { grid-auto-columns: 72%; }
  .slider__trilho--estrutura img { aspect-ratio: 3/4; }
}

/* Galeria de detalhes: mostra a foto inteira, qualquer orientação, com fundo desfocado */
.detalhes__foto { aspect-ratio: 3/2; background: var(--mar-950); isolation: isolate; }
.detalhes__foto::before { content: ""; position: absolute; inset: -20px; z-index: -1; background: var(--fundo) center/cover; filter: blur(24px) brightness(.55); }
.detalhes__foto img { object-fit: contain; }
.detalhes__legenda { margin: 0; font-size: var(--txt-sm); color: var(--cor-texto-suave); }
.detalhes__minis { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); max-height: 152px; overflow-y: auto; }
@media (max-width: 820px) { .detalhes__foto { aspect-ratio: 4/5; } }

/* Seções com <picture>: a imagem interna herda o comportamento antigo */
.hero__img picture img, .cta-final picture img { width: 100%; height: 100%; object-fit: cover; }
.manifesto__fotos picture:first-child img { position: absolute; inset: 0 22% 14% 0; width: 78%; height: 86%; object-fit: cover; border-radius: var(--raio-lg); box-shadow: var(--sombra-2); }
.manifesto__fotos picture:last-child img { position: absolute; right: 0; bottom: 0; width: 52%; height: 48%; object-fit: cover; border-radius: var(--raio-lg); border: 6px solid var(--cor-fundo); box-shadow: var(--sombra-2); }
.servico__visual img { width: 100%; height: 100%; object-fit: cover; }