/* =========================================================
   Layout: cabeçalho, menu, rodapé padrão, topo das páginas
   internas e WhatsApp flutuante.
   ========================================================= */

/* ---------- Cabeçalho ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
  color: var(--c-paper); --focus: var(--c-gold-soft);
  transition: background-color 0.4s, box-shadow 0.4s, color 0.4s;
}
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -40px; pointer-events: none;
  background: linear-gradient(rgba(14, 13, 11, 0.65), transparent);
  transition: opacity 0.4s;
}
.site-header.is-solid, .site-header.is-menu-open {
  background: rgba(248, 245, 239, 0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--c-line); color: var(--c-ink); --focus: var(--c-gold-deep);
}
.site-header.is-solid::before, .site-header.is-menu-open::before { opacity: 0; }

.site-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: 100%; }
.site-header__left { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); min-width: 0; }

.brand { position: relative; display: block; flex: none; width: 138px; }
.brand__logo { width: 100%; height: auto; transition: opacity 0.4s; }
.brand__logo--dark { position: absolute; inset: 0; opacity: 0; }
.is-solid .brand__logo--light, .is-menu-open .brand__logo--light { opacity: 0; }
.is-solid .brand__logo--dark, .is-menu-open .brand__logo--dark { opacity: 1; }

.main-nav__list { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.main-nav a { position: relative; padding-block: 0.5rem; font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; }
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after, .main-nav a[aria-current="true"]::after { transform: scaleX(1); }

.site-header__actions { display: flex; align-items: center; gap: 0.5rem; }
.btn--quote { min-height: 48px; padding: 0.5rem 0.75rem 0.5rem 1.1rem; gap: 0.55rem; background: var(--c-paper); color: var(--c-ink); font-size: 0.9375rem; }
.btn--quote:hover { background: var(--c-white); }
.is-solid .btn--quote, .is-menu-open .btn--quote { background: var(--c-ink); color: var(--c-paper); }
.quote-count {
  display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.45rem;
  border-radius: var(--radius-pill); background: var(--c-gold-soft); color: var(--c-ink);
  font-size: 0.8125rem; font-weight: 700; line-height: 1;
}
.quote-count.is-bump { animation: bump 0.5s var(--ease-out); }
.menu-toggle { display: none; }

/* ---------- Topo das páginas internas ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)) 0 clamp(3rem, 7vw, 5.5rem);
  background: var(--c-ink) url("../img/marmore-escuro.webp") center / cover;
  color: var(--c-paper);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 20% 0%, rgba(232, 200, 130, 0.18), transparent 60%), linear-gradient(180deg, rgba(14, 13, 11, 0.35), rgba(14, 13, 11, 0.7));
}
.page-hero h1 { max-width: 20ch; font-size: var(--fs-h1); }
.page-hero .lead { max-width: 58ch; margin-top: var(--space-4); }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--c-on-dark); }

/* ---------- Rodapé padrão ---------- */
.site-footer { position: relative; background: #121110; color: var(--c-paper); --focus: var(--c-gold-soft); }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-gold), transparent); }
.footer__top { display: grid; gap: var(--space-5); padding-block: clamp(3.5rem, 6vw, 5rem) var(--space-5); }
.footer__brand img { width: 168px; margin-bottom: var(--space-3); }
.footer__brand p { max-width: 32ch; color: var(--c-on-dark); font-size: var(--fs-sm); }
.footer__title { margin-bottom: var(--space-3); font-family: var(--f-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold-soft); }
.footer__list { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.footer__list a, .footer__list button {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 40px; padding: 0; border: 0; background: none;
  color: rgba(248, 246, 242, 0.82); font-size: var(--fs-sm); text-align: left; text-decoration: none;
}
.footer__list a:hover, .footer__list button:hover { color: var(--c-paper); text-decoration: underline; text-underline-offset: 4px; }
.footer__list svg { width: 20px; height: 20px; color: var(--c-gold-soft); }
.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem var(--space-4);
  padding-block: var(--space-4) calc(var(--space-4) + 5rem);
  border-top: 1px solid var(--c-ink-line); font-size: var(--fs-xs); color: rgba(248, 246, 242, 0.66);
}
.footer__legal p { margin: 0; }

/* ---------- WhatsApp flutuante ---------- */
.wa-float {
  position: fixed; right: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.75rem); z-index: 60;
  display: flex; align-items: center; gap: 0.6rem; text-decoration: none; --focus: var(--c-gold-deep);
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
.wa-float__label {
  padding: 0.6rem 1rem; border-radius: var(--radius-pill); background: var(--c-ink); color: var(--c-paper);
  font-size: 0.9375rem; font-weight: 600; box-shadow: var(--shadow-float);
  opacity: 0; transform: translateX(8px); transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
.wa-float__icon {
  position: relative; display: grid; place-items: center; width: 62px; height: 62px;
  border-radius: 50%; background: var(--c-whatsapp); color: var(--c-white); box-shadow: var(--shadow-float);
}
.wa-float__icon svg { width: 30px; height: 30px; }
.wa-float__icon::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--c-whatsapp); border-radius: 50%; animation: pulse 2.6s var(--ease-out) 1.5s 3; }
.wa-float:hover { transform: translateY(-2px); }
.wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label { opacity: 1; transform: none; }
body.is-locked .wa-float { opacity: 0; pointer-events: none; }

/* ---------- Voltar ao topo (páginas longas) ---------- */
.to-top {
  position: fixed; left: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.75rem); z-index: 55;
  opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s var(--ease-out);
  box-shadow: var(--shadow-soft);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top svg { transform: rotate(90deg); }

/* ---------- Responsivo ---------- */
@media (min-width: 720px) {
  .footer__top { grid-template-columns: 1.3fr 1fr 1fr; }
}
@media (min-width: 1100px) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1.2fr 1.1fr; }
}

@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .brand { width: 118px; }
  .menu-toggle {
    display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: inherit;
  }
  .menu-toggle__bars { position: relative; display: block; width: 24px; height: 14px; }
  .menu-toggle__bars span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform 0.35s var(--ease-out), opacity 0.2s; }
  .menu-toggle__bars span:nth-child(1) { top: 0; }
  .menu-toggle__bars span:nth-child(2) { top: 6px; }
  .menu-toggle__bars span:nth-child(3) { top: 12px; }
  .is-menu-open .menu-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .is-menu-open .menu-toggle__bars span:nth-child(2) { opacity: 0; }
  .is-menu-open .menu-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .main-nav {
    position: fixed; inset: var(--header-h) 0 auto; padding: var(--space-3) var(--gutter) var(--space-6);
    background: var(--c-paper); color: var(--c-ink); box-shadow: 0 30px 40px -30px rgba(0, 0, 0, 0.35);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity 0.35s, transform 0.35s var(--ease-out), visibility 0s linear 0.35s;
  }
  /* Ao abrir, a visibilidade muda na hora (permite focar o primeiro link); ao fechar, espera a animação. */
  .is-menu-open .main-nav { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s, transform 0.35s var(--ease-out), visibility 0s; }
  .main-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav a { display: block; padding-block: 1rem; border-bottom: 1px solid var(--c-line); font-family: var(--f-display); font-size: 1.875rem; font-weight: 500; }
  .main-nav a::after { display: none; }
}
@media (max-width: 700px) {
  .wa-float__label { display: none; }
}
@media (max-width: 480px) {
  .btn--quote { padding: 0.5rem 0.6rem 0.5rem 0.8rem; }
  .btn--quote__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Abertura (intro) com o logo: só na primeira página da visita ---------- */
.intro {
  position: fixed; inset: 0; z-index: 400; display: grid; place-content: center; justify-items: center; gap: 1.5rem;
  background: #0d0c0b url("../img/marmore-escuro.webp") center / cover;
  transition: opacity 0.9s var(--ease-out), visibility 0.9s;
}
.intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-seen .intro { display: none; }
.intro__logo {
  width: min(72vw, 460px); height: auto; filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.6));
  -webkit-mask-image: linear-gradient(90deg, #000 33%, transparent 66%); mask-image: linear-gradient(90deg, #000 33%, transparent 66%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  animation: intro-write 1.7s var(--ease-out) 0.15s forwards;
}
.intro__line { width: min(46vw, 220px); height: 1px; background: linear-gradient(90deg, transparent, var(--c-gold-soft), transparent); transform: scaleX(0); animation: intro-line 1.3s ease 0.6s forwards; }
@keyframes intro-write { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes intro-line { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }