/* ==========================================================================
   04 · LAYOUT GLOBAL
   1. Faixa de demonstração  2. Cabeçalho  3. Barra fixa mobile  4. Rodapé
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FAIXA DE DEMONSTRAÇÃO (remover em produção)
   -------------------------------------------------------------------------- */

.dial__status[data-state="unavailable"] {
    color: #dc2626;
    font-weight: 600;
}

.demo-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 2.25rem;
  background: repeating-linear-gradient(135deg, #1f1b16 0 10px, #26211b 10px 20px);
  color: var(--gold-100);
  font-size: 0.75rem;
  font-weight: 600;
}

.demo-bar__inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
}

.demo-bar__label {
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  background: var(--gold-300);
  color: var(--ink-950);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.demo-bar__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quando a faixa existe, empurra cabeçalho e hero para baixo */
.has-demo {
  --demo-bar-h: 2.25rem;
}

/* --------------------------------------------------------------------------
   1b. FAIXA DO TOPO (mecânica da campanha)
   Fixa no topo, fundo preto com destaques em dourado. Altura: --top-bar-h (tokens).
   -------------------------------------------------------------------------- */
.top-bar {
  position: fixed;
  top: var(--demo-bar-h);
  inset-inline: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--top-bar-h);
  padding-inline: var(--gutter);
  background: #000;
  border-bottom: 1px solid rgb(237 203 125 / 0.25); /* fio dourado separando do cabeçalho */
  color: var(--text-on-dark-muted);
}

.top-bar__text {
  overflow: hidden;
  font-size: 0.75rem; /* 12px no celular */
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-bar__text strong {
  font-weight: 700;
  color: var(--gold-300); /* valores em dourado */
}

/* Versão curta até o tablet; frase completa no desktop */
.top-bar__full {
  display: none;
}

/* Celular: a versão curta quebra em 2 linhas (sem o separador) */
.top-bar__sep {
  display: none;
}
.top-bar__second {
  display: block;
  margin-top: 0.125rem;
}

@media (min-width: 40rem) {
  .top-bar__text {
    font-size: var(--fs-xs); /* 13px no tablet */
  }
  .top-bar__sep {
    display: inline;
  }
  .top-bar__second {
    display: inline;
    margin-top: 0;
  }
}

@media (min-width: 64rem) {
  .top-bar__text {
    font-size: var(--fs-small); /* 14px no desktop */
  }
  .top-bar__full {
    display: inline;
  }
  .top-bar__short {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   2. CABEÇALHO
   Transparente sobre o hero; ganha fundo ao rolar (.is-scrolled).
   -------------------------------------------------------------------------- */
.site-header {
background-color: black;
  position: fixed;
  top: calc(var(--demo-bar-h) + var(--top-bar-h)); /* fica logo abaixo da faixa do topo */
  inset-inline: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.5s,
    border-color 0.5s;
}

.site-header.is-scrolled {
  border-bottom-color: rgb(246 232 199 / 0.1);
  background: rgb(11 10 9 / 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

.site-header__logo {
  margin: -0.5rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
}

.site-header__logo img {
  width: 7.5rem; /* 120px no celular */
}

/* Navegação: escondida no celular, visível no desktop */
.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.site-nav__link {
  position: relative;
  padding-block: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-on-dark-muted);
  text-decoration: none;
  transition: color var(--dur-fast);
}

/* Sublinhado dourado que cresce no hover */
.site-nav__link::after {
  content: '';
  position: absolute;
  inset: auto 0 -2px;
  height: 1px;
  background: var(--gold-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-silk);
}

.site-nav__link:hover {
  color: var(--cream-100);
}
.site-nav__link:hover::after {
  transform: scaleX(1);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-header__link {
  padding: 0.75rem 0.5rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-on-dark-muted);
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 26rem) {
  .site-header__logo img { width: 8.25rem; }
}

@media (min-width: 64rem) {
  .site-header__logo img { width: 9.75rem; }
  .site-nav { display: block; }
  .site-header__link { display: none; }
}

/* --------------------------------------------------------------------------
   3. BARRA FIXA DE CTA (somente celular/tablet)
   Aparece fora do hero e some sobre o formulário (.is-visible via JS).
   -------------------------------------------------------------------------- */
.mobile-cta {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgb(246 232 199 / 0.15);
  background: rgb(11 10 9 / 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(100%);
  transition: transform 0.5s var(--ease-silk);
  pointer-events: none;
}

.mobile-cta.is-visible {
  transform: none;
  pointer-events: auto;
}

.mobile-cta__primary {
  flex: 1;
  min-width: 0;
  padding-inline: 1rem;
}

.mobile-cta__secondary {
  flex-shrink: 0;
  padding-inline: 1rem;
  font-size: var(--fs-small);
}

@media (min-width: 64rem) {
  .mobile-cta { display: none; }
}

/* --------------------------------------------------------------------------
   4. RODAPÉ
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 5rem 0 calc(6rem + env(safe-area-inset-bottom)); /* espaço extra p/ barra mobile */
  border-top: 1px solid rgb(246 232 199 / 0.1);
  background: var(--ink-950);
}

.site-footer__grid {
  display: grid;
  gap: 3rem;
}

.site-footer__brand img:first-child,
.site-footer__brand picture img {
  width: 11rem;
}

.site-footer__lettering {
  width: 14rem;
  margin-top: 2rem;
  opacity: 0.8;
}

.site-footer__heading {
  color: var(--gold-300);
}

.site-footer__links {
  margin-top: 1.25rem;
}

.site-footer__links li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  min-height: 2.75rem;
}

.site-footer__links a {
  font-size: 0.9375rem;
  color: var(--text-on-dark-muted);
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition:
    color var(--dur-fast),
    text-decoration-color var(--dur-fast);
}

.site-footer__links a:hover {
  color: var(--cream-100);
  text-decoration-color: var(--gold-300);
}

.site-footer__legal {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-on-dark-muted);
}

.site-footer__legal dt {
  font-weight: 600;
  color: var(--cream-100);
}

.site-footer__legal dd {
  margin-top: 0.25rem;
}

.site-footer__legal .tag-pending {
  margin-top: 0.375rem;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgb(246 232 199 / 0.12);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-on-dark-subtle);
}

.site-footer__bottom p:first-child {
  max-width: 48rem;
}

/* "© 2026 Sleep House Colchões · Dev by Webmee" */
.site-footer__credits {
  flex-shrink: 0;
}

.site-footer__credits a {
  font-weight: 600;
  color: var(--text-on-dark-muted);
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition:
    color var(--dur-fast),
    text-decoration-color var(--dur-fast);
}

.site-footer__credits a:hover {
  color: var(--gold-200);
  text-decoration-color: var(--gold-300);
}

@media (min-width: 40rem) {
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 64rem) {
  .site-footer {
    padding-bottom: 3.5rem;
  }
  .site-footer__grid {
    grid-template-columns: 4fr 3fr 4fr;
    gap: 2rem;
  }
}