/* ==========================================================================
   sections.css — blocos de página: header, hero, localização, pilares, salas,
   formulário, rodapé, barra CTA, 404. Layout mobile-first; ajustes de
   breakpoint em responsive.css. Ritmo de luz por mudança de fundo (DESIGN.md).
   ========================================================================== */

/* Fundos do ritmo de luz */
.section--dark { background: var(--color-brand-deep); color: var(--color-on-dark); }
.section--sunken { background: var(--color-surface-sunken); }
.localizacao, .pilares { background: var(--color-canvas); }

/* Ícone two-tone em fundo escuro: a estrutura brand-deep some, então rende sólido
   on-dark (perde o two-tone, mas fica legível — usado só em rodapé/sucesso). */
.ico--on-dark { filter: brightness(0) invert(1); }

/* ----- Header (fixo; transparente sobre o hero, sólido ao rolar) ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  transition: background var(--motion-base) var(--motion-ease-out),
              box-shadow var(--motion-base) var(--motion-ease-out);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  min-height: var(--header-h); max-width: var(--container-max); margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo-img { height: 30px; width: auto; }
.site-header__logo-img--dark { display: none; }
.site-header__cta { min-height: 44px; padding-block: var(--space-sm); padding-inline: var(--space-lg); font-size: var(--font-label-size); }
.site-header.is-solid { background: var(--color-canvas); box-shadow: 0 1px 0 var(--color-hairline); }
.site-header.is-solid .site-header__logo-img--light { display: none; }
.site-header.is-solid .site-header__logo-img--dark { display: block; }

/* ----- Hero --------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; background: var(--color-brand-deep); overflow: hidden; }
.hero__photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__grafismo {
  position: absolute; z-index: 2; top: 50%; right: 0; height: 120%;
  aspect-ratio: 1920 / 1080; transform: translate(8%, -50%);
  color: var(--color-brand-deep); opacity: 0.42; pointer-events: none;
}
.hero__grafismo svg { height: 100%; width: 100%; }
.hero__scrim { position: absolute; inset: 0; z-index: 3; background: var(--scrim-hero); }
.hero__inner {
  position: relative; z-index: 4; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  width: 100%; max-width: var(--container-max); margin-inline: auto;
  padding: calc(var(--header-h) + var(--space-lg)) var(--gutter) var(--space-2xl);
  color: var(--color-on-dark);
}
.hero__col { margin-block: auto; max-width: 36ch; }
.hero__eyebrow {
  margin-bottom: var(--space-md);
  font-size: var(--font-eyebrow-size); font-weight: var(--font-eyebrow-weight);
  line-height: var(--font-eyebrow-leading); letter-spacing: var(--font-eyebrow-tracking);
  text-transform: uppercase; color: var(--color-on-dark-muted);
}
.hero__title {
  margin-bottom: var(--space-lg);
  font-size: var(--font-display-size); font-weight: var(--font-display-weight);
  line-height: var(--font-display-leading); letter-spacing: var(--font-display-tracking);
}
.hero__sub {
  margin-bottom: var(--space-xl); max-width: 46ch;
  font-size: var(--font-body-lg-size); line-height: var(--font-body-lg-leading); color: var(--color-on-dark);
}
.hero__actions { display: flex; flex-direction: column; gap: var(--space-md); align-items: flex-start; }

/* ----- Localização -------------------------------------------------------- */
.selos { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); }
.localizacao__map { margin-top: var(--space-2xl); aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.localizacao__map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 767px) { .localizacao__map { aspect-ratio: 4 / 3; } }

/* ----- Pilares ------------------------------------------------------------ */
.pilares__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); margin-top: var(--space-2xl); }
.pilar__label {
  font-size: var(--font-eyebrow-size); font-weight: var(--font-eyebrow-weight);
  letter-spacing: var(--font-eyebrow-tracking); text-transform: uppercase;
  color: var(--color-brand); margin-bottom: var(--space-sm);
}
.pilar__headline { font-size: var(--font-h3-size); font-weight: var(--font-h3-weight); color: var(--color-ink); margin-bottom: var(--space-sm); }
.pilar__body { color: var(--color-ink-muted); font-size: var(--font-body-size); line-height: var(--font-body-leading); max-width: 42ch; }
.pilares__cta-line { margin-top: var(--space-2xl); }

/* ----- Salas -------------------------------------------------------------- */
.rooms__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); margin-top: var(--space-2xl); }

/* ----- Formulário --------------------------------------------------------- */
.lead-form { margin-top: var(--space-2xl); }
.lead-form__submit { width: 100%; margin-top: var(--space-sm); position: relative; }
.lead-form.is-loading .lead-form__submit { color: transparent; }
.lead-form__spinner { display: none; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px;
  border: 2px solid color-mix(in srgb, var(--color-on-accent) 40%, transparent);
  border-top-color: var(--color-on-accent); border-radius: var(--radius-full); animation: spin 0.7s linear infinite; }
.lead-form.is-loading .lead-form__spinner { display: block; }
.lead-form__microcopy { margin-top: var(--space-md); text-align: center; font-size: var(--font-body-sm-size); color: var(--color-on-dark-muted); }
.lead-form__form-error { margin-top: var(--space-md); text-align: center; font-size: var(--font-body-sm-size); color: var(--color-error-tint); }
.lead-form__success { margin-top: var(--space-2xl); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.lead-form__success .ico { width: 56px; height: 56px; margin-bottom: var(--space-sm); }
.lead-form__success-title { font-size: var(--font-h3-size); font-weight: var(--font-weight-bold); color: var(--color-on-dark); }
.lead-form__success p { color: var(--color-on-dark-muted); max-width: 36ch; }

/* ----- Rodapé ------------------------------------------------------------- */
.site-footer { background: var(--color-brand-corporate); color: var(--color-on-dark); }
.site-footer__inner {
  max-width: var(--container-max); margin-inline: auto;
  padding: var(--space-3xl) var(--gutter) var(--space-xl);
  display: flex; flex-direction: column; gap: var(--space-2xl);
}
.site-footer__logo { height: 32px; width: auto; }
.site-footer__slogan { margin-top: var(--space-md); color: var(--color-on-dark-muted); font-size: var(--font-body-lg-size); max-width: 26ch; }
.site-footer__contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.site-footer__address { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-on-dark); font-size: var(--font-body-sm-size); }
.site-footer__social { display: flex; gap: var(--space-lg); font-size: var(--font-body-sm-size); }
.site-footer__social a { color: var(--color-on-dark-muted); text-decoration: underline; text-underline-offset: 2px; transition: color var(--motion-fast) var(--motion-ease-out); }
.site-footer__social a:hover { color: var(--color-on-dark); }
.site-footer__legal {
  border-top: 1px solid color-mix(in srgb, var(--color-on-dark) 16%, transparent);
  max-width: var(--container-max); margin-inline: auto;
  padding: var(--space-lg) var(--gutter) var(--space-2xl);
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl);
  color: var(--color-on-dark-muted); font-size: var(--font-body-sm-size);
}
.site-footer__legal a { color: var(--color-on-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ----- Barra CTA fixa (mobile) -------------------------------------------- */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cta-bar); display: none;
  padding: var(--space-sm) var(--gutter) max(var(--space-sm), env(safe-area-inset-bottom));
  background: var(--color-brand-deep);
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--color-on-dark) 12%, transparent);
  transform: translateY(110%); transition: transform var(--motion-base) var(--ease-ios);
}
.cta-bar.is-visible { transform: translateY(0); }
.cta-bar__btn { width: 100%; }

/* ----- 404 ---------------------------------------------------------------- */
.notfound { min-height: 72vh; display: flex; align-items: center; }
.notfound__inner { padding-block: calc(var(--header-h) + var(--space-3xl)); }
.notfound__actions { margin-top: var(--space-xl); }