/* Seções de página. */

.section { position: relative; padding-block: clamp(96px, 12vw, 180px); }
.section--tight { padding-block: clamp(64px, 8vw, 112px); }
.bg-2 { background: var(--bg-2); transition: background-color var(--t-theme) var(--ease-io); }
.kicker { font-size: var(--text-label-caps); letter-spacing: var(--tracking-label-caps); text-transform: uppercase; color: var(--fg-soft); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--spacing-md) var(--spacing-2xl); margin-bottom: clamp(40px, 5vw, 72px); }
.section-head p { max-width: 26rem; color: var(--fg-soft); }

/* ===== Cena interativa (hero, Natal, "no ambiente") ===== */
.scene { position: relative; overflow: hidden; background: var(--bg); transition: background-color var(--t-theme) var(--ease-io); }
.scene__wrap { position: relative; }
.scene__stage { position: relative; aspect-ratio: 16 / 9; width: 100%; }
.scene__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 900ms var(--ease-io); }
.scene__img--light { opacity: 0; }
[data-theme="light"] .scene__img--light { opacity: 1; }
[data-theme="light"] .scene__img--dark { opacity: 0; }
.scene__spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 200px at var(--sx, 50%) var(--sy, 50%), transparent 0 55%, rgb(12 11 10 / .52) 100%);
  transition: opacity 450ms var(--ease-out);
}
[data-theme="light"] .scene__spot { background: radial-gradient(circle 200px at var(--sx, 50%) var(--sy, 50%), transparent 0 55%, rgb(243 238 231 / .58) 100%); }
.scene.is-focus .scene__spot { opacity: 1; }
.scene__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--veil-side) 0%, transparent 42%), linear-gradient(0deg, var(--bg) 0%, transparent 18%);
}
.scene__veil--right { background: linear-gradient(270deg, var(--veil-side) 0%, transparent 40%), linear-gradient(0deg, var(--bg) 0%, transparent 16%), linear-gradient(180deg, var(--bg) 0%, transparent 14%); }
.scene__veil--soft { background: linear-gradient(0deg, var(--bg) 0%, transparent 14%), linear-gradient(180deg, var(--bg) 0%, transparent 12%); }

.hotspots { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; }
.hotspot { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; transition: left 900ms var(--ease-io), top 900ms var(--ease-io); }
.hotspot.is-open { z-index: 5; }
.hotspot__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.hotspot__dot::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-linho);
  box-shadow: 0 0 0 1px rgb(37 34 33 / .25), 0 4px 14px rgb(0 0 0 / .35);
  transition: scale 300ms var(--ease-out);
}
.hotspot__dot::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-linho);
  border-radius: 50%;
  animation: ping 2.8s var(--ease-out) infinite;
  animation-delay: var(--d, 0s);
}
.hotspot.is-open .hotspot__dot::before, .hotspot__dot:hover::before { scale: 1.35; }
.hotspot.is-solo .hotspot__dot::before { scale: 1.5; }
@keyframes ping { from { scale: 1; opacity: .7; } to { scale: 3; opacity: 0; } }

.hot-card {
  position: absolute;
  top: 0;
  left: 26px;
  width: 264px;
  padding: 18px 18px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: var(--shadow-float);
  opacity: 0;
  translate: 0 calc(-50% + 8px);
  pointer-events: none;
  transition: opacity 250ms var(--ease-out), translate 350ms var(--ease-out);
}
.hotspot.is-left .hot-card { left: auto; right: 26px; }
.hotspot.is-open .hot-card { opacity: 1; translate: 0 -50%; pointer-events: auto; }
.hotspot.is-top .hot-card { translate: 0 -14px; }
.hotspot.is-top.is-open .hot-card { translate: 0 -22px; }
.hotspot.is-bottom .hot-card { translate: 0 calc(-100% + 30px); }
.hotspot.is-bottom.is-open .hot-card { translate: 0 calc(-100% + 22px); }
.hot-card__thumb { float: right; width: 64px; aspect-ratio: 4 / 5; margin: 0 0 6px 12px; border-radius: 10px; object-fit: cover; background: var(--color-areia); }
.hot-card__kind { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-soft); }
.hot-card__name { margin-top: 4px; font-family: var(--font-display), Georgia, serif; font-size: 1.9rem; line-height: 1.05; font-weight: 400; }
.hot-card__price { margin-top: 6px; font-size: .95rem; font-variant-numeric: tabular-nums; }
.hot-card__link { clear: both; display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; font-size: .9rem; text-decoration: none; }
.hot-card__link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: translate 300ms var(--ease-out); }
.hot-card__link:hover svg { translate: 4px 0; }

.scene__hint { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--fg-soft); }
.pulse { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--fg); }
.pulse::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--fg); border-radius: 50%; animation: ping 2.4s var(--ease-out) infinite; }

/* hero da home */
.hero__copy { position: absolute; top: calc(var(--nav-h) + 8vh); left: var(--gutter); z-index: 3; max-width: 36rem; pointer-events: none; }
.hero__title { font-size: clamp(var(--text-display-mobile), 7.4vw, var(--text-display)); }
.hero__title em { padding-left: .6em; font-weight: 300; }
.hero__foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(24px, 4vw, 48px); z-index: 3; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--spacing-md); }
.hero__cta-block { display: grid; gap: 20px; }
.hero__lede { max-width: 22rem; font-size: 1.05rem; color: var(--fg-soft); }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* cabeçalho sobreposto a uma cena (Natal) */
.scene__copy { position: absolute; top: clamp(32px, 6vw, 88px); z-index: 3; max-width: 30rem; pointer-events: none; }
.scene__copy--left { left: var(--gutter); }
.scene__copy--right { right: var(--gutter); text-align: right; }
.scene__copy .ctas { pointer-events: auto; margin-top: 24px; }
.scene__copy--right .ctas { justify-content: flex-end; }
.scene__copy p { margin-top: 16px; color: var(--fg-soft); }
.scene__foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 24px; z-index: 3; display: flex; justify-content: flex-end; }

/* mobile: cena vira panorama arrastável */
@media (max-width: 899px) {
  .scene--hero { padding-top: calc(var(--nav-h) + 36px); }
  .scene__wrap { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .scene__wrap::-webkit-scrollbar { display: none; }
  .scene__stage { width: auto; height: 62svh; min-height: 380px; }
  .scene__veil, .scene__veil--right { background: linear-gradient(0deg, var(--bg) 0%, transparent 14%); }
  .hero__copy, .scene__copy { position: relative; inset: auto; padding: 0 var(--gutter) 24px; text-align: left; pointer-events: auto; }
  .scene__copy--right .ctas { justify-content: flex-start; }
  .hero__foot, .scene__foot { position: relative; inset: auto; padding: 24px var(--gutter) 0; justify-content: flex-start; }
  .scene__hint::after { content: " · arraste para ver a cena"; }
  .hot-card { width: 220px; }
  .scene--natal { padding-top: var(--spacing-3xl); }
}

/* ===== Conceito: módulos ===== */
.concept {
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 78% 55%, var(--glow) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.concept__inner { display: grid; gap: 64px; align-items: center; }
.concept__title { margin-top: 18px; }
.concept__body { margin-top: 24px; max-width: 28rem; font-size: 1.15rem; color: var(--fg-soft); }
.concept .link-arrow { margin-top: 28px; }
.modules { width: min(460px, 100%); aspect-ratio: 1; justify-self: center; }
.mono { display: block; width: 100%; height: 100%; overflow: visible; }
.mono .mod { fill: var(--mod-fg); transition: fill var(--t-theme) var(--ease-io); }
.mono__frame { fill: none; stroke: var(--mod-fg); stroke-width: 2.5; stroke-dasharray: 1; transition: stroke var(--t-theme) var(--ease-io); }
@media (min-width: 900px) { .concept__inner { grid-template-columns: 5fr 6fr; gap: 96px; } }

/* ===== Galeria horizontal ===== */
.hgallery { position: relative; min-height: 100svh; padding-top: clamp(96px, 12svh, 130px); overflow: hidden; }
.hgallery .section-head { padding-inline: var(--gutter); margin-bottom: 40px; }
.hgallery__track { display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 32px); width: max-content; padding: 0 var(--gutter) 64px; }
.hgallery .card { flex: none; width: clamp(220px, 34svh, 400px); }
.hgallery .card:nth-child(3n+2) { width: clamp(240px, 40svh, 460px); }
.hgallery .card:nth-child(3n+2) .card__media { aspect-ratio: 3 / 4; }
.hgallery__end {
  display: grid;
  flex: none;
  place-items: center;
  align-content: center;
  gap: 14px;
  width: clamp(220px, 30svh, 320px);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.8rem;
  text-decoration: none;
  transition: background-color 300ms var(--ease-out);
}
.hgallery__end:hover { background: var(--glass); }
.hgallery__end svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }
@media (max-width: 899px) {
  .hgallery { min-height: 0; }
  .hgallery__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hgallery__track > * { scroll-snap-align: start; }
}

/* ===== Faixa com imagem (profissionais) ===== */
.band { position: relative; min-height: 88svh; display: grid; align-items: end; overflow: hidden; color: var(--color-linho); }
.band__img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(20 18 17 / .82) 0%, rgb(20 18 17 / .2) 55%, transparent 80%); }
.band__card { position: relative; z-index: 2; display: grid; gap: var(--spacing-lg); max-width: 38rem; padding: 0 var(--gutter) clamp(40px, 7vw, 96px); }
.band__card p { color: rgb(243 238 231 / .8); }
.band .btn--solid { background: var(--color-linho); color: var(--color-grafite); }
.band .btn--ghost { border-color: rgb(243 238 231 / .3); background: rgb(37 34 33 / .4); color: var(--color-linho); }

/* ===== Banner das páginas internas ===== */
.banner { position: relative; display: grid; align-items: end; min-height: clamp(460px, 78svh, 820px); overflow: hidden; }
.banner__img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transition: opacity 900ms var(--ease-io); }
.banner__img--light { opacity: 0; }
[data-theme="light"] .banner__img--light { opacity: 1; }
[data-theme="light"] .banner__img--dark.has-light { opacity: 0; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 0%, transparent 45%), linear-gradient(90deg, var(--veil-side) 0%, transparent 55%); }
.banner__copy { position: relative; z-index: 2; display: grid; gap: var(--spacing-md); padding: calc(var(--nav-h) + 80px) var(--gutter) clamp(40px, 6vw, 80px); max-width: 52rem; }
.banner__copy p { max-width: 30rem; color: var(--fg-soft); font-size: 1.1rem; }

/* ===== Coleção ===== */
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-bottom: clamp(40px, 5vw, 64px); }
.grid-stagger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 14px; }
.grid-stagger > :nth-child(even) { margin-top: 40px; }
@media (min-width: 900px) {
  .grid-stagger { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px clamp(20px, 2.5vw, 40px); }
  .grid-stagger > :nth-child(even) { margin-top: 0; }
  .grid-stagger > :nth-child(3n+2) { margin-top: 14vh; }
}

/* ===== Produto ===== */
.pdp-page { background: radial-gradient(70% 50% at 20% 20%, var(--glow) 0%, transparent 70%), var(--bg); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); padding-top: calc(var(--nav-h) + 48px); font-size: .88rem; color: var(--fg-soft); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pdp { display: grid; gap: var(--spacing-xl); padding-block: var(--spacing-lg) var(--spacing-3xl); }
.pdp__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); background: var(--media-bg); }
.pdp__media img { width: 100%; height: 100%; object-fit: cover; }
.pdp__info { display: grid; gap: var(--spacing-lg); align-content: start; }
.pdp__name { font-size: clamp(3rem, 6vw, 5.4rem); }
.pdp__price { font-size: 1.3rem; }
.variation { display: grid; gap: var(--spacing-sm); margin: 0; padding: 0; border: 0; }
.variation legend { margin-bottom: var(--spacing-sm); padding: 0; font-size: .85rem; color: var(--fg-soft); }
.edition { display: flex; align-items: center; gap: var(--spacing-sm); }
.edition::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-argila); }
.buy { display: grid; gap: var(--spacing-md); }
.buy .stepper { justify-self: start; }
.spec-list { display: grid; grid-template-columns: max-content 1fr; gap: 12px var(--spacing-lg); margin: 0; padding-top: var(--spacing-lg); border-top: 1px solid var(--line); font-size: .92rem; }
.spec-list dt { color: var(--fg-soft); }
.spec-list dt, .spec-list dd { margin: 0; }
@media (min-width: 560px) { .buy { grid-template-columns: auto 1fr; } }
@media (min-width: 900px) {
  .pdp { grid-template-columns: 7fr 5fr; gap: clamp(48px, 6vw, 112px); }
  .pdp__info { position: sticky; top: calc(var(--nav-h) + 48px); align-self: start; }
}

/* ===== Páginas institucionais ===== */
.statement { font-family: var(--font-display), Georgia, serif; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.12; font-weight: 300; letter-spacing: -.015em; max-width: 22ch; }
.statement em { font-style: italic; }
.split { display: grid; gap: var(--spacing-2xl); align-items: center; }
.split--top { align-items: start; }
.split__media { overflow: hidden; border-radius: var(--radius-lg); background: var(--media-bg); }
.split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: clamp(64px, 8vw, 140px); } }

.principles { display: grid; gap: var(--spacing-xl); margin: 0; padding: 0; list-style: none; counter-reset: p; }
.principles li { display: grid; gap: var(--spacing-sm); padding-top: var(--spacing-lg); border-top: 1px solid var(--line); }
.principles h3 { font-family: var(--font-display), Georgia, serif; font-size: 2rem; font-weight: 400; }
.principles p { color: var(--fg-soft); }
@media (min-width: 900px) { .principles--row { grid-template-columns: repeat(3, 1fr); } }

.form-card { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.form-card h2 { font-family: var(--font-display), Georgia, serif; font-size: 2.2rem; font-weight: 400; margin-bottom: var(--spacing-sm); }

.contact-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.contact-list li { border-bottom: 1px solid var(--line); }
.contact-list a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--spacing-md); min-height: 96px; text-decoration: none; }
.contact-list .contact__label { font-size: .85rem; color: var(--fg-soft); }
.contact-list .contact__value { font-family: var(--font-display), Georgia, serif; font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 300; line-height: 1.1; }
.contact-list svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.2; transition: translate 400ms var(--ease-out); }
.contact-list a:hover svg { translate: 6px 0; }

@media (max-width: 899px) {
  .contact-list a { grid-template-columns: 1fr; gap: 4px; padding-block: 20px; }
  .contact-list svg { display: none; }
}
.band .kicker { color: rgb(243 238 231 / .72); }

/* Natal: o texto fica do lado livre da cena — esquerda de dia, direita à noite */
.scene__copy--natal { left: var(--gutter); }
.scene__veil--natal { background: linear-gradient(90deg, var(--veil-side) 0%, transparent 38%), linear-gradient(0deg, var(--bg) 0%, transparent 16%), linear-gradient(180deg, var(--bg) 0%, transparent 12%); }
@media (min-width: 900px) {
  [data-theme="dark"] .scene__copy--natal { left: auto; right: var(--gutter); text-align: right; }
  [data-theme="dark"] .scene__copy--natal .ctas { justify-content: flex-end; }
  [data-theme="dark"] .scene__veil--natal { background: linear-gradient(270deg, var(--veil-side) 0%, transparent 38%), linear-gradient(0deg, var(--bg) 0%, transparent 16%), linear-gradient(180deg, var(--bg) 0%, transparent 12%); }
}