/* ==========================================================================
   components.css — peças reutilizáveis: botões, selos/tags, card de sala,
   campos de formulário, controles do carrossel, lightbox.
   Fiel aos previews aprovados (hero/card-redesign/card-galeria/catálogo).
   Disciplina de token: onde o preview usava rgba() cru de cor de marca, aqui é
   color-mix() referenciando o token (tokens.css é gerado, não se edita à mão).
   ========================================================================== */

/* ----- Botões ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--font-button-size);
  font-weight: var(--font-button-weight);
  line-height: var(--font-button-leading);
  border-radius: var(--radius-md);
  padding: var(--space-pad-button);
  min-height: 48px;
  border: 1px solid transparent;
  cursor: pointer; text-align: center; white-space: normal; max-width: 100%;
  transition: background var(--motion-base) var(--motion-ease-out),
              transform var(--motion-fast) var(--motion-ease-out);
}
.btn--cta { background: var(--color-accent); color: var(--color-on-accent); }
.btn--cta:hover { background: var(--color-accent-pressed); }
.btn--cta:active { transform: translateY(1px); }
.btn--cta:disabled, .btn--cta[aria-disabled="true"] {
  background: var(--color-hairline-strong); color: var(--color-ink-subtle); cursor: not-allowed;
}
.btn--secondary {
  background: transparent; color: var(--color-ink); border-color: var(--color-hairline-strong);
}
.btn--secondary:hover { background: var(--color-surface-sunken); }
/* anel de foco visível; sobre fundo escuro inverte para branco */
.btn:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }
.section--dark .btn:focus-visible, .hero .btn:focus-visible, .site-footer .btn:focus-visible {
  outline-color: var(--color-on-dark);
}
.btn__arrow { transition: transform var(--motion-base) var(--ease-ios); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ----- Selo de localização (ícone + texto, sem pílula) -------------------- */
.selo {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  color: var(--color-ink); font-size: var(--font-body-size);
}

/* ----- Tag de observação (pílula brand-soft) ----------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  background: var(--color-brand-soft); color: var(--color-brand-corporate);
  font-size: var(--font-tag-size); font-weight: var(--font-tag-weight); line-height: var(--font-tag-leading);
  border-radius: var(--radius-full); padding: var(--space-pad-tag);
}
.tag .ico { width: var(--icon-sm); height: var(--icon-sm); }

/* ----- Card de sala (imersivo 4:5, redesign B aprovado) ------------------ */
.room-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform 0.45s var(--ease-ios), box-shadow 0.45s var(--ease-ios);
}
.room-card__media { position: relative; flex: none; aspect-ratio: 4 / 5; overflow: hidden; }
.room-card__photo {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform 0.7s var(--ease-ios);
}
.room-card__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(var(--color-brand-deep-rgb), 0.88) 0%,
    rgba(var(--color-brand-deep-rgb), 0.30) 40%,
    transparent 64%);
}
/* botão invisível que cobre a foto e abre a galeria (acessível, com label) */
.room-card__open {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  background: transparent; border: 0; cursor: zoom-in;
}
.room-card__open:focus-visible { outline: 3px solid var(--color-on-dark); outline-offset: -4px; }
.room-card__status, .room-card__count {
  position: absolute; top: var(--space-md); z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--font-tag-size); font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full); padding: 0.3rem 0.7rem;
  backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
}
.room-card__status {
  left: var(--space-md);
  background: color-mix(in srgb, var(--color-canvas) 82%, transparent);
  color: var(--color-ink);
}
.room-card__count {
  right: var(--space-md); gap: 6px;
  background: rgba(var(--color-brand-deep-rgb), 0.5); color: var(--color-on-dark);
}
.room-card__dot {
  width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-accent);
  animation: pulse 2.6s ease-in-out infinite;
}
.room-card__play {
  width: 0; height: 0; border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
.room-card__id {
  position: absolute; z-index: 2; left: var(--space-lg); right: var(--space-lg); bottom: var(--space-lg);
  color: var(--color-on-dark); pointer-events: none;
}
.room-card__title {
  font-size: var(--font-h1-size); font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-h1-tracking); line-height: 1.04;
}
.room-card__sub { color: var(--color-on-dark-muted); font-size: var(--font-body-sm-size); margin-top: var(--space-xs); }
.room-card__body { flex: 1; display: flex; flex-direction: column; padding: var(--space-lg); }
.room-card__specs { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-lg); }
.room-card__spec { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--font-body-sm-size); color: var(--color-ink-muted); }
.room-card__spec .ico { width: 19px; height: 19px; }
.room-card__cta { margin-top: auto; width: 100%; }

/* ----- Controles do carrossel (mobile) ----------------------------------- */
.carousel-nav { display: none; align-items: center; justify-content: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.carousel-nav__btn {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  border: 1px solid var(--color-hairline-strong); background: var(--color-surface); color: var(--color-ink);
  font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background var(--motion-fast), opacity var(--motion-fast);
}
.carousel-nav__btn:disabled { opacity: 0.3; cursor: default; }
.carousel-nav__dots { display: flex; align-items: center; gap: var(--space-sm); }
.carousel-nav__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--radius-full);
  background: var(--color-hairline-strong); cursor: pointer;
  transition: width 0.3s var(--ease-ios), background 0.3s var(--ease-ios);
}
.carousel-nav__dot.is-active { width: 22px; background: var(--color-brand); }

/* ----- Campos de formulário ---------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.field__label { font-size: var(--font-label-size); font-weight: var(--font-label-weight); color: var(--color-on-dark); }
.field__control {
  font-family: var(--font-sans); font-size: var(--font-body-size); color: var(--color-ink);
  background: var(--color-surface); border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-sm); min-height: 48px; padding: var(--space-pad-input);
  width: 100%; transition: border-color var(--motion-fast) var(--motion-ease-out);
}
.field__control::placeholder { color: var(--color-ink-subtle); }
.field__control:focus-visible { outline: 0; border-color: var(--color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 40%, transparent); }
.field__select { position: relative; }
/* seta do select desenhada, para não depender do chrome nativo */
.field__select::after {
  content: ""; position: absolute; right: var(--space-md); top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--color-ink-subtle); border-bottom: 2px solid var(--color-ink-subtle);
  transform: translateY(-65%) rotate(45deg); pointer-events: none;
}
.field__select .field__control { appearance: none; -webkit-appearance: none; padding-right: var(--space-2xl); }
.field.is-error .field__control { border-color: var(--color-error); }
.field__error { font-size: var(--font-body-sm-size); color: var(--color-on-dark); min-height: 0; }
.field.is-error .field__error { color: var(--color-error-tint); }
/* honeypot fora da tela */
.lead-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ----- Lightbox (galeria estética Apple) --------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  opacity: 0; transform: scale(0.96); transform-origin: center; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.45s var(--ease-ios);
  display: flex; flex-direction: column;
}
.lightbox.is-open { opacity: 1; transform: scale(1); pointer-events: auto; }
.lightbox__backdrop { position: absolute; inset: 0; z-index: 0; background: var(--scrim-immersive); }
.lightbox.is-dragging .lightbox__top,
.lightbox.is-dragging .lightbox__bottom,
.lightbox.is-dragging .lightbox__arrow { opacity: 0 !important; }

.lightbox__track {
  position: relative; z-index: 1; flex: 1; min-height: 0; display: flex;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.lightbox__track::-webkit-scrollbar { display: none; }
.lightbox__slide {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  padding: 60px clamp(12px, 4vw, 40px) 124px; transition: padding 0.32s var(--ease-ios);
}
.lightbox__slide img, .lightbox__slide video {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius-media);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--scrim-immersive) 65%, transparent);
}
.lightbox.is-chrome-hidden .lightbox__slide { padding-top: 16px; padding-bottom: 16px; }

.lightbox__top, .lightbox__bottom {
  position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none;
  transition: opacity 0.3s var(--ease-ios), transform 0.3s var(--ease-ios), visibility 0.3s;
}
.lightbox__top {
  top: 0; display: flex; align-items: center; justify-content: space-between;
  padding: max(var(--space-md), env(safe-area-inset-top)) var(--space-md) var(--space-2xl);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--scrim-immersive) 55%, transparent), transparent);
}
.lightbox__bottom {
  bottom: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-md);
  padding: var(--space-2xl) var(--space-md) max(var(--space-md), env(safe-area-inset-bottom));
  background: linear-gradient(to top, color-mix(in srgb, var(--scrim-immersive) 60%, transparent), transparent);
}
.lightbox.is-chrome-hidden .lightbox__top { opacity: 0; visibility: hidden; transform: translateY(-12px); }
.lightbox.is-chrome-hidden .lightbox__bottom { opacity: 0; visibility: hidden; transform: translateY(12px); }
.lightbox__top > *, .lightbox__bottom > * { pointer-events: auto; }
.lightbox__label { color: var(--color-on-dark); font-size: var(--font-body-sm-size); font-weight: var(--font-weight-semibold); }
.lightbox__close {
  width: 36px; height: 36px; border-radius: var(--radius-full); color: var(--color-on-dark);
  font-size: 1.35rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-on-dark) 18%, transparent);
  backdrop-filter: blur(var(--blur-glass)) saturate(1.4); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.4);
}
.lightbox__close:hover { background: color-mix(in srgb, var(--color-on-dark) 28%, transparent); }
.lightbox__counter { color: var(--color-on-dark); font-size: var(--font-body-sm-size); letter-spacing: 0.02em; }
.lightbox__thumbs { display: flex; gap: var(--space-sm); max-width: 100%; overflow-x: auto; padding: 2px var(--space-xs); scrollbar-width: none; }
.lightbox__thumbs::-webkit-scrollbar { display: none; }
.lightbox__thumb {
  position: relative; flex: none; width: 44px; height: 58px; border-radius: var(--radius-sm); overflow: hidden;
  padding: 0; cursor: pointer; background: none; opacity: 0.5; transform: scale(0.9);
  transition: opacity 0.25s var(--ease-ios), transform 0.25s var(--ease-ios), box-shadow 0.25s;
}
/* anel de foco por box-shadow: o outline com offset positivo seria cortado pelo
   overflow do filmstrip/lightbox; o box-shadow (ring) não. */
.lightbox__thumb:focus-visible, .lightbox__close:focus-visible,
.lightbox__arrow:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-on-dark); }
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumb:hover { opacity: 0.85; }
.lightbox__thumb.is-active { opacity: 1; transform: scale(1); box-shadow: 0 0 0 2px var(--color-on-dark); }
.lightbox__thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lightbox__thumb-play::after {
  content: ""; width: 0; height: 0; margin-left: 2px;
  border-left: 9px solid var(--color-on-dark); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.lightbox__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: var(--radius-full); color: var(--color-on-dark);
  font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-on-dark) 14%, transparent);
  backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass));
  transition: opacity 0.3s var(--ease-ios), background 0.2s, visibility 0.3s;
}
.lightbox__arrow:hover { background: color-mix(in srgb, var(--color-on-dark) 26%, transparent); }
.lightbox__arrow--prev { left: var(--space-lg); }
.lightbox__arrow--next { right: var(--space-lg); }
.lightbox.is-chrome-hidden .lightbox__arrow { opacity: 0; visibility: hidden; }