/* Provador 3D. Identidade: Raleway (texto) + Fraunces (títulos), grafite #383838,
   terracota #C75F55, rosados #F8EBEB / #E4C7C6 */
:root {
  --ink: #383838;
  --ink-soft: #707070;
  --accent: #c75f55;
  --accent-soft: rgba(199, 95, 85, .14);
  --rose: #e4c7c6;
  --blush: #f8ebeb;
  --paper: #ffffff;
  --line: rgba(56, 56, 56, .28);
  --font: "Raleway", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --bg-top: #f3dfdc;
  --bg-bottom: #fbf4f3;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--font); font-weight: 500; -webkit-font-smoothing: antialiased; }
body { overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------------- carregamento ---------------- */
#loader { position: fixed; inset: 0; z-index: 50; background: var(--blush); display: grid; place-items: center; align-content: center; gap: 22px; transition: opacity .5s ease; }
#loader.done { opacity: 0; pointer-events: none; }
.loader-bar { width: 120px; height: 2px; background: rgba(199, 95, 85, .18); overflow: hidden; border-radius: 2px; }
.loader-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.loader-txt { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
#wipe { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }

/* ---------------- visualizador ---------------- */
.view { position: fixed; inset: 0; }
.bg { position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 80%); transition: background .8s ease; }
.bg-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(199, 95, 85, .16) 1px, transparent 1.4px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 50%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.4) 50%, transparent 85%); }
.bg-glow { position: absolute; inset: 0; background: radial-gradient(55% 45% at 50% 58%, #ffffff 0%, transparent 70%); opacity: .9; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#stage.dragging { cursor: grabbing; }

.topbar { position: absolute; top: 0; left: 0; right: 0; height: 68px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; color: inherit; font-size: 28px; line-height: 1; }
.menu-btn { position: absolute; left: 12px; top: 14px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 10px; }
.menu-btn span { display: block; height: 2px; width: 18px; background: currentColor; border-radius: 1px; }
.menu-btn.dark { position: static; }

/* controles laterais */
.side-tools { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; align-items: flex-end; z-index: 3; }
.tool { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 16px; background: rgba(255,255,255,.72); backdrop-filter: blur(10px); box-shadow: 0 6px 22px rgba(120, 60, 50, .12); transition: background .2s, box-shadow .2s; text-align: left; }
.tool:hover { background: #fff; box-shadow: 0 8px 26px rgba(120, 60, 50, .18); }
.tool-ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--blush); color: var(--accent); }
.tool-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tool-txt { display: flex; flex-direction: column; line-height: 1.15; }
.tool-txt b { font-size: 13px; font-weight: 700; }
.tool-txt small { font-size: 11px; color: var(--ink-soft); }
.switch { width: 34px; height: 20px; border-radius: 10px; background: #d9cfcd; position: relative; transition: background .25s; margin-left: 4px; }
.switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .25s cubic-bezier(.3,.7,.3,1.3); }
.tool[aria-pressed="true"] .switch { background: var(--accent); }
.tool[aria-pressed="true"] .switch i { transform: translateX(14px); }
.tool[aria-pressed="true"] .tool-ico { background: var(--accent); color: #fff; }
.tool-mini { padding: 7px 12px; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 99px; }
.tool-mini svg { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.skin-tones { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: 99px; background: rgba(255,255,255,.78); backdrop-filter: blur(10px); box-shadow: 0 6px 22px rgba(120,60,50,.12); }
.skin-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); margin-right: 2px; }
.skin { display: flex; align-items: center; gap: 5px; padding: 4px 9px 4px 4px; border-radius: 99px; font-size: 12px; font-weight: 600; transition: background .2s; }
.skin i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(56,56,56,.25); }
.skin[data-skin="clara"] i { background: #ebc1a6; }
.skin[data-skin="negra"] i { background: #5e3a29; }
.skin[aria-checked="true"] { background: var(--blush); }
.skin[aria-checked="true"] i { box-shadow: 0 0 0 2px var(--accent); }

/* pontos de interação (popups) */
#hotspots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.hotspot { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; align-items: center; gap: 8px; transform: translate(-13px, -13px); opacity: 0; transition: opacity .35s ease; will-change: transform; }
.hotspot.show { opacity: 1; }
.hotspot.hidden-now { pointer-events: none; }
.hs-dot { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 4px 14px rgba(120,40,30,.35); display: grid; place-items: center; color: #fff; flex: none; }
.hs-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); animation: pulse 2s ease-out infinite; }
.hs-dot svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transition: transform .35s; }
.hotspot.is-open .hs-dot svg { transform: rotate(45deg); }
.hs-card { background: #fff; border-radius: 12px; padding: 7px 11px 7px 10px; box-shadow: 0 8px 24px rgba(120,60,50,.16); display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; transform-origin: left center; transition: transform .25s, opacity .25s; opacity: 0; transform: scale(.85); pointer-events: none; }
.hotspot.expanded .hs-card { opacity: 1; transform: none; pointer-events: auto; }
.hotspot.flip .hs-card { transform-origin: right center; }
.hs-card b { font-size: 12px; font-weight: 700; }
.hs-card span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.hotspot.expanded:hover .hs-card { transform: scale(1.04); }
.hotspot.flip { flex-direction: row-reverse; transform: translate(calc(-100% + 13px), -13px); }
.hotspot.busy .hs-card span { opacity: .75; }
.hs-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent); opacity: 0; transition: opacity .2s; }
.hotspot.busy .hs-ring { opacity: 1; animation: spin .8s linear infinite; }
.hotspot.busy .hs-dot::after { animation: none; opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

.corner { position: absolute; bottom: 16px; font-family: var(--serif); font-size: clamp(16px, 1.5vw, 22px); font-weight: 500; color: var(--ink); padding: 6px 12px; letter-spacing: .02em; }
.corner-left { left: 8px; }
.corner-right { right: 8px; }
.corner:hover { color: var(--accent); }

.entry-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; }
.entry-card { display: flex; background: rgba(255,255,255,.82); backdrop-filter: blur(12px); border-radius: 18px; box-shadow: 0 10px 30px rgba(120,60,50,.14); min-width: min(470px, 80vw); overflow: hidden; }
.entry-main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 10px 14px 9px; gap: 2px; }
.entry-ref { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--accent); }
.entry-name { font-family: var(--serif); font-size: clamp(17px, 1.45vw, 21px); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-actions { margin-top: 5px; font-size: 11px; font-weight: 600; letter-spacing: .06em; display: flex; gap: 8px; align-items: center; text-transform: uppercase; white-space: nowrap; }
.swatches { display: flex; gap: 6px; }
.swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(56,56,56,.25); transition: box-shadow .2s, transform .2s; }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--accent); transform: scale(1.08); }
.entry-color { color: var(--ink-soft); }
.sep { color: var(--line); }
.link-btn:hover { color: var(--accent); }
.share-ok { display: none; color: var(--accent); }
.share-ok.show { display: inline; }
.entry-likes { width: 78px; border-left: 1px solid rgba(56,56,56,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 14px; font-weight: 700; color: var(--accent); }
.entry-likes svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .2s; }
.entry-likes[aria-pressed="true"] svg { fill: currentColor; transform: scale(1.15); }
.entry-likes small { font-size: 8.5px; letter-spacing: .1em; color: var(--ink-soft); }
.next-btn { width: 50px; height: 50px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(56,56,56,.25); transition: background .2s; }
.next-btn:hover { background: var(--accent); }
.next-btn svg { width: 22px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.next-btn:hover svg { transform: translateX(3px); }

.hint { position: absolute; left: 50%; top: 74px; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); opacity: 0; transition: opacity .6s; pointer-events: none; }
.hint .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.hint.show { opacity: .9; }

.details { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); padding: 58px 30px 30px; transform: translateX(100%); transition: transform .45s cubic-bezier(.2,.7,.2,1); z-index: 6; overflow-y: auto; box-shadow: -10px 0 40px rgba(120,60,50,.12); }
.details.open { transform: none; }
.details .close-btn { position: absolute; top: 12px; right: 12px; color: var(--ink-soft); }
.details-ref { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--accent); }
.details h2 { margin: 6px 0 4px; font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.15; }
.details-sub { margin: 0 0 18px; color: var(--ink-soft); font-size: 14px; }
.details h3 { margin: 22px 0 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.details ul { margin: 0; padding-left: 18px; }
.details li { font-size: 14px; line-height: 1.45; margin: 3px 0; }
.details li::marker { color: var(--accent); }

/* ---------------- galeria ---------------- */
#view-gallery { background: #fff; overflow-y: auto; }
.gal-top { position: sticky; top: 0; z-index: 3; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid #f0e2e1; }
.gal-row1 { height: 58px; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 0 6px; }
.gal-title { margin: 2px 0 6px; text-align: center; font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 3vw, 36px); }
.gal-title em { font-style: italic; color: var(--accent); }
.gal-row2 { display: flex; justify-content: space-between; align-items: center; padding: 6px 16px 12px; gap: 10px; flex-wrap: wrap; }
.gal-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.gal-filters button { padding: 7px 14px; border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: .06em; background: var(--blush); color: var(--ink); transition: background .2s, color .2s; }
.gal-filters button.active { background: var(--ink); color: #fff; }
.gal-sort { display: flex; gap: 16px; font-size: 13px; font-weight: 600; }
.gal-sort button { color: #c3b3b1; }
.gal-sort button.active { color: var(--ink); }
.gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px; max-width: 1400px; margin: 0 auto; }
.tile { position: relative; aspect-ratio: 1 / 1.12; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #fbf4f3 0%, #f1dcd9 100%); box-shadow: 0 6px 22px rgba(120,60,50,.08); transition: box-shadow .3s, transform .3s; }
.tile:hover { box-shadow: 0 12px 30px rgba(120,60,50,.16); transform: translateY(-2px); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tile:hover img { transform: scale(1.04); }
.tile-info { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.tile-ref { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--accent); }
.tile-name { font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.15; }
.tile-likes { font-size: 11px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.tile-badge { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.85); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* menu */
#menu { position: fixed; inset: 0; z-index: 30; background: var(--blush); display: flex; flex-direction: column; justify-content: center; padding: 0 8vw; gap: 14px; transform: translateY(-100%); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
#menu.open { transform: none; }
#menu a, #menu-items a { display: block; font-family: var(--serif); font-size: clamp(26px, 4.6vw, 54px); font-weight: 500; line-height: 1.15; }
#menu a:hover { color: var(--accent); }
#menu .close-btn { position: absolute; top: 14px; right: 18px; color: var(--ink); }
.menu-note { color: var(--ink-soft); font-size: 13px; margin: 0; }

@media (max-width: 1000px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .entry-bar { bottom: 56px; gap: 10px; }
  .entry-card { min-width: 0; width: calc(100vw - 86px); }
  .entry-likes { width: 62px; }
  .corner { bottom: 10px; font-size: 15px; }
  .side-tools { top: auto; bottom: 150px; right: 10px; transform: none; }
  .tool-txt small { display: none; }
  .hint { top: 70px; font-size: 9.5px; white-space: normal; text-align: center; width: 90vw; }
  .gal-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; }
  .tile-name { font-size: 14px; }
  .hs-card { padding: 5px 9px; }
}
@media (prefers-reduced-motion: reduce) { .hs-dot::after { animation: none; opacity: 0; } .tile, .tile img { transition: none; } }