/* ── acessibilidade ─────────────────────────────────────── */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--edge); top: var(--s-1); z-index: 99; background: var(--brand);
              color: #06131a; padding: 0.7em 1.1em; font-weight: 700; }

/* ── cabeçalho ──────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--ink-900) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-700);
}
.site-head__in {
  max-width: 1400px; margin-inline: auto; padding: var(--s-2) var(--edge);
  display: flex; align-items: center; gap: var(--s-4);
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 40px; height: 40px; }
.brand__txt { font-weight: 800; font-stretch: 84%; font-size: 1.125rem;
              letter-spacing: 0.01em; color: var(--ink-050); }
.site-nav { display: flex; gap: var(--s-3); }
.site-nav a { text-decoration: none; color: var(--ink-200); font-size: var(--step--1);
              font-weight: 600; font-stretch: 100%; letter-spacing: 0.03em;
              padding-block: 0.6rem; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink-050); border-bottom-color: var(--brand); }
.site-head__cta { padding: 0.6em 1.1em; min-height: 44px; font-size: var(--step--1); }

@media (max-width: 860px) {
  .site-nav { display: none; }
  .site-head__cta { padding: 0.6em 0.9em; }
}

/* ── hero ───────────────────────────────────────────────── */
.hero { position: relative; min-height: min(86vh, 760px); display: flex; align-items: flex-end;
        overflow: hidden; isolation: isolate; }
/* object-position puxa o enquadramento para a água, não para a parede.
   No celular o recorte é muito mais vertical, então precisa descer mais —
   senão sobra telhado e o ativo (a piscina) fica fora do quadro. */
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%;
            object-fit: cover; object-position: 62% 78%; z-index: -2; }
@media (max-width: 700px) {
  .hero__bg { object-position: 72% 96%; }
  .hero { min-height: min(78vh, 680px); }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--ink-900) 1%, color-mix(in oklab, var(--ink-900) 82%, transparent) 46%,
                    color-mix(in oklab, var(--ink-900) 46%, transparent) 100%),
    linear-gradient(to right, color-mix(in oklab, var(--ink-900) 86%, transparent) 8%,
                    color-mix(in oklab, var(--ink-900) 30%, transparent) 72%);
}
.hero__in { padding-block: var(--s-6) var(--s-5); width: 100%; }
.hero h1 { max-width: 15ch; }
.hero__accent { color: var(--brand); }
.hero__lede { margin-top: var(--s-3); max-width: 54ch; color: var(--ink-050); }

.hero__stats { display: flex; gap: var(--s-5); margin-top: var(--s-4);
               padding-top: var(--s-3); border-top: 1px solid var(--ink-600); }
.hero__stats > div { display: flex; flex-direction: column; gap: 0.35rem; }
.hero__stats .figure { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.hero__stats .figure small { font-size: 0.45em; font-weight: 700; margin-left: 0.05em;
                             vertical-align: super; color: var(--brand); }
.hero__stats .meta { text-transform: lowercase; }

/* ── cabeçalho de seção ─────────────────────────────────── */
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3);
            justify-content: space-between; margin-bottom: var(--s-4); }
.sec-head__note { max-width: 44ch; }

/* ── unidades: lista, não grade de cards ────────────────── */
.units { list-style: none; margin: 0; padding-block: var(--s-1) 0; padding-inline: 0;
         border-top: 1px solid var(--ink-700); }
.unit {
  display: grid; align-items: center; gap: var(--s-2) var(--s-3);
  grid-template-columns: minmax(16rem, 1.5fr) minmax(10rem, 1fr) minmax(13rem, 1.1fr) auto;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--ink-700);
  transition: background 140ms ease;
}
.unit:hover { background: var(--ink-800); }
.unit__name { font-size: var(--step-2); margin-bottom: 0.15rem; }
.unit__name a { text-decoration: none; }
.unit__name a:hover { color: var(--brand); }
.unit__addr { font-size: var(--step--1); line-height: 1.5; color: var(--ink-400); }
.unit__tag { color: var(--ink-200); }
.unit__when { display: flex; flex-direction: column; gap: 0.3rem; }
.unit__hours { line-height: 1.45; }
.unit__act { display: flex; gap: var(--s-1); justify-content: flex-end; }
.unit__act .btn { padding: 0.65em 1.1em; font-size: var(--step--1); min-height: 44px; }

@media (max-width: 1080px) {
  .unit { grid-template-columns: 1fr 1fr; }
  .unit__id { grid-column: 1 / -1; }
  .unit__act { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .unit { grid-template-columns: 1fr; }
}

/* ── modalidades ────────────────────────────────────────── */
.modal-grid { display: grid; gap: var(--s-4) var(--s-5);
              grid-template-columns: minmax(16rem, 23rem) 1fr; align-items: start; }
.modal-grid__cols { display: grid; gap: var(--s-4) var(--s-3);
                    grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .modal-grid__cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .modal-grid__cols { grid-template-columns: 1fr; } }
.mod h3 { color: var(--brand); font-size: var(--step-1); font-stretch: 94%; font-weight: 700;
          margin-bottom: var(--s-2); padding-bottom: var(--s-1);
          border-bottom: 1px solid var(--ink-700); }
.mod__list { list-style: none; margin: 0; padding: 0; }
.mod__list li { padding-block: 0.7rem; font-size: var(--step--1); line-height: 1.5;
                border-bottom: 1px solid color-mix(in oklab, var(--ink-700) 55%, transparent); }
.mod__list li:last-child { border-bottom: 0; }
@media (max-width: 900px) { .modal-grid { grid-template-columns: 1fr; } }

/* ── faixa de estrutura ─────────────────────────────────── */
.strip { display: grid; gap: 2px; margin-top: var(--s-4);
         grid-template-columns: repeat(4, 1fr); }
.strip__it { margin: 0; position: relative; }
.strip__it--wide { grid-column: span 2; grid-row: span 2; }
.strip__it img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
                 aspect-ratio: 4 / 3; }
.strip__it--wide img { aspect-ratio: 16 / 11; object-position: 55% 82%; }
.strip__it figcaption { position: absolute; left: 0; bottom: 0; right: 0;
  padding: var(--s-3) var(--s-2) var(--s-1);
  background: linear-gradient(to top, color-mix(in oklab, var(--ink-900) 92%, transparent), transparent);
  color: var(--ink-050); }
@media (max-width: 760px) {
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip__it--wide { grid-column: span 2; grid-row: auto; }
}

/* ── rodapé ─────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--ink-700); padding-block: var(--s-5) var(--s-3);
             margin-top: var(--s-6); background: var(--ink-800); }
.site-foot__in { display: grid; gap: var(--s-4) var(--s-5);
                 grid-template-columns: minmax(14rem, 20rem) 1fr; }
.site-foot__brand { display: flex; gap: var(--s-2); align-items: flex-start; }
.site-foot__units :is(h3,h4) { font-size: var(--step-1); font-stretch: 94%; font-weight: 700; margin-bottom: var(--s-2); }
.foot-units { list-style: none; margin: 0; padding: 0; }
.foot-units li { padding-block: 0.7rem; font-size: var(--step--1); line-height: 1.55;
                 color: var(--ink-400);
                 border-bottom: 1px solid color-mix(in oklab, var(--ink-700) 60%, transparent); }
.foot-units strong { color: var(--ink-050); font-stretch: 96%; }
.foot-units a { color: var(--ink-200); }
.site-foot__legal { display: flex; flex-wrap: wrap; gap: var(--s-2);
                    justify-content: space-between; margin-top: var(--s-4);
                    padding-top: var(--s-2); border-top: 1px solid var(--ink-700); }
@media (max-width: 760px) { .site-foot__in { grid-template-columns: 1fr; } }