/* Monolito 3D: shared tokens and pieces for every page.
   Idea: the printer's layer lines. Pictures and headlines arrive layer by layer, bottom to top. */
/* Inter Tight served from this site (OFL licence in assets/fonts/OFL.txt): no trip to Google before the page can draw. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/inter-tight.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded Marca"; font-weight: 800; font-display: swap; src: url(/assets/fonts/unbounded-marca.woff2) format("woff2"); }
@font-face { font-family: "Unbounded Marca"; font-weight: 600; font-display: swap; src: url(/assets/fonts/unbounded-marca-600.woff2) format("woff2"); }
/* ===== Design system =====
   A dark site: onyx black ground, light ink, one accent (electric indigo). One typeface. Sizes and gaps come only from the scales below,
   so every page lines up with every other. Values are in px at 16px root unless noted. */
:root {
  /* Colour roles: a dark site. Onyx black is the page, electric indigo the action. */
  color-scheme: dark;
  --ground: #0f0f10;        /* onyx black: the page */
  --surface: #18181b;       /* panels and cards, one step up from the page */
  --step: #232327;          /* one more step: picture slots, fields, quiet borders */
  --line: #3a3a40;          /* a stronger border: hover on fields and choices */
  --ink: #f2f2f0;           /* text and the second button (not pure white) */
  --ink-hover: #ffffff;
  --muted: #a6a6ab;         /* secondary notes only (8:1 on the page) */
  --accent: #6f00ff;        /* electric indigo: the action and one other thing */
  --accent-hover: #8226ff;
  --on-accent: #ffffff;     /* text on indigo (6.7:1) */
  --accent-ink: #9d6bff;    /* indigo as text, links, focus: plain indigo is too dark on onyx (5.5:1) */
  --accent-on-dark: #9d6bff;
  --dark: #18181b;          /* the bands that were dark (spin, footer) now sit one step up */
  --dark-step: #232327;
  --on-dark: #f2f2f0;
  --on-dark-muted: #a6a6ab;
  --positive: #5fd38a;      /* money in, success */
  --positive-bg: #10301c;
  --positive-ink: #b5f2c9;
  --negative: #ff8a7a;      /* errors, money out */
  --negative-bg: #3a1512;
  --swatch-edge: rgba(255,255,255,.22); /* ring around colour dots so black filament shows */
  --brand-ink: #a78bfa;     /* the "3D" in the wordmark */
  /* The monolith from the logo: three faces of violet and a light top. Used only by the logo and the 3D monolith. */
  --mono-front: #7c3aed; --mono-side: #4c1d95; --mono-back: #5b21b6; --mono-left: #6d28d9; --mono-top: #c4b5fd;

  /* Type: one family, a fixed scale. Most screens use five or six of these. */
  --font: "Inter Tight", system-ui, sans-serif;
  --fs-small: 0.875rem;                                   /* 14  hints, captions, meta */
  --fs-ui: 1rem;                                          /* 16  nav, controls, rows, lists */
  --fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);  /* 17-19  running text */
  --fs-h3: 1.25rem;                                       /* 20  panel, card and item titles */
  --fs-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);    /* 20-26  intro sentence, list titles */
  --fs-title: clamp(1.75rem, 1.5rem + 0.6vw, 2rem);       /* 28-32  app page title, app figures */
  --fs-figure: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem);    /* 28-40  figures on the home page */
  --fs-head: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem);      /* 36-72  section headings */
  --fs-display: clamp(3.25rem, 0.6rem + 7.4vw, 8rem);     /* 52-128 the hero headline */
  /* Old names, kept so nothing breaks */
  --step-small: var(--fs-small); --step-body: var(--fs-body); --step-lead: var(--fs-lead); --step-head: var(--fs-head); --step-display: var(--fs-display);
  --track-display: -0.045em; --track-head: -0.035em; --track-title: -0.03em; --track-figure: -0.02em;

  /* Space: a 4px base. Inside a component use 1-6; between blocks 7-9; between sections --section. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --margin: clamp(16px, 3vw, 40px);           /* the page's outer margin, the same on both sides */
  --gap: clamp(16px, 2vw, 24px);              /* grid gutter */
  --section: clamp(80px, 11vw, 160px);        /* between sections: 80 on a phone, 160 on a wide screen */
  --pad: clamp(20px, 2.4vw, 32px);            /* inside a panel */
  --control: 48px;                            /* height of buttons and fields; 44 is the touch minimum */
  --border: 2px;                              /* fields, choices, boxes */
  --radius: 0px;                              /* square corners everywhere; only colour dots are round */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms; --t-hover: 180ms; --t-ui: 240ms;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.5; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }

/* Frame: one pair of margins, one 12-col grid */
.wrap { padding-inline: var(--margin); max-width: 1680px; margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }

/* Navigation: wordmark, four links, one action. The same on every page. No bar chrome. */
.nav { display: flex; align-items: center; gap: var(--sp-6); height: 76px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: "Unbounded Marca", var(--font); font-weight: 800; font-size: 19px; letter-spacing: -0.04em; text-decoration: none; }
.wordmark b { color: var(--brand-ink); font-weight: 600; margin-left: -6px; }
.wordmark img { width: 18px; height: 31px; flex: none; }
.nav ul { display: flex; align-items: center; gap: var(--sp-5); list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav ul a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: var(--fs-ui); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav ul a:hover, .nav ul a[aria-current=page] { text-decoration-line: underline; }
.nav ul a.btn { padding: 0 var(--sp-4); text-decoration: none; }
.nav .menu-btn { display: none; }
@media (max-width: 900px) {
  .nav { height: 64px; gap: var(--sp-4); }
  .nav ul { display: none; }
  .nav .menu-btn { display: inline-flex; margin-left: auto; }
  .nav.open ul { display: flex; flex-direction: column; align-items: flex-start; position: fixed; inset: 64px 0 0; background: var(--ground); padding: var(--sp-6) var(--margin); gap: var(--sp-2); z-index: 20; }
  .nav.open ul a { font-size: var(--fs-title); font-weight: 600; letter-spacing: var(--track-figure); line-height: 1.4; }
  .nav.open ul a.btn { margin-top: var(--sp-4); font-size: var(--fs-ui); padding: 0 var(--sp-6); min-height: var(--control); }
}

/* Buttons: flat, square, one fill */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 52px; padding: 0 var(--sp-6); border: 0; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font: 600 17px/1 var(--font); text-decoration: none; cursor: pointer; transition: background var(--t-hover), transform var(--t-press) var(--ease-out); }
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn.ink { background: var(--ink); color: var(--ground); }
.btn.ink:hover { background: var(--ink-hover); }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 var(--border) currentColor; }
.btn.ghost:hover { background: var(--step); }
.btn.small { min-height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-ui); }
.btn:disabled, .btn[aria-disabled=true] { background: var(--step); color: var(--muted); cursor: not-allowed; transform: none; }
.link { font-weight: 600; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.link:hover { color: var(--accent-ink); }

/* Demo slot: reserved for a real photo or render later. Drop an <img> inside and the drawing goes away.
   The drawing is a figurine made of print layers, in the page's own colours. */
.slot { position: relative; margin: 0; background: var(--step); overflow: hidden; display: grid; }
.slot > svg.layers { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ink); opacity: 0.16; }
.slot > img, .slot > video, .slot > model-viewer { position: relative; width: 100%; height: 100%; object-fit: cover; }
.slot:has(> img, > video, > model-viewer) > svg.layers, .slot:has(> img, > video, > model-viewer) > .slot-label { display: none; }
.slot-label { position: relative; align-self: end; justify-self: start; margin: var(--sp-4); padding: 6px 10px; background: var(--ground); color: var(--muted); font-size: var(--fs-small); line-height: 1.3; }
.slot.dark { background: var(--dark-step); }
/* The journey in three drawings: the flat photo, the 3D model as a mesh (in indigo), the printed piece in layers. */
.slot > svg.layers.foto, .slot.dark > svg.layers.foto { opacity: 0.2; }
.slot > svg.layers.malha, .slot.dark > svg.layers.malha { color: var(--accent-ink); opacity: 0.7; }
.slot.dark > svg.layers { color: var(--on-dark); opacity: 0.22; }
.slot.dark .slot-label { background: var(--dark); color: var(--on-dark-muted); }
.slot.accent { background: var(--accent); }
.slot.accent > svg.layers { opacity: 0.28; }

/* Footer: the name returns at full width */
.foot { background: var(--dark); color: var(--on-dark); padding-top: var(--sp-9); }
.foot .facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-6); font-size: var(--fs-ui); color: var(--on-dark-muted); }
.foot .facts a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); }
.foot .name { font-family: "Unbounded Marca", var(--font); font-weight: 800; font-size: 12vw; line-height: 0.9; letter-spacing: -0.02em; margin: var(--sp-7) 0 0; white-space: nowrap; overflow: hidden; }
.foot .name b { color: var(--brand-ink); font-weight: 600; }

/* App pages (criar, modelos, modelo, carrinho, creditos, pedidos) share a simple head.
   A tool, not a poster: the title is 28-32px and the intro sentence is in full ink. */
.page-head { padding-block: var(--sp-6) var(--sp-6); }
.page-head h1 { font-size: var(--fs-title); line-height: 1.1; letter-spacing: var(--track-title); margin: 0 0 var(--sp-2); font-weight: 600; }
.page-head p { margin: 0; max-width: 60ch; }

/* Motion: layer-by-layer arrival, transform/opacity/clip only */
@media (prefers-reduced-motion: no-preference) {
  /* A cover in the section's colour shrinks upward in steps, so the picture "prints" bottom to top.
     (Clipping the element itself would hide it from the IntersectionObserver.) */
  .js [data-print]::after { content: ""; position: absolute; inset: 0; background: var(--print-cover, var(--ground)); transform-origin: top; z-index: 2; pointer-events: none; }
  .js [data-print].is-in::after { transform: scaleY(0); transition: transform 700ms steps(14, end); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); }
  .js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 450ms var(--ease-out) var(--d, 0ms), transform 600ms var(--ease-out) var(--d, 0ms); }
  .lines .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .lines [data-line] { display: block; }
  .js .lines [data-line] { transform: translateY(105%); animation: line-up 650ms var(--ease-expo) forwards; animation-delay: calc(var(--i) * 80ms + 40ms); }
  .js [data-load] { opacity: 0; transform: translateY(12px); animation: load-rise 400ms var(--ease-out) forwards; animation-delay: var(--d, 200ms); }
}
@keyframes line-up { to { transform: none; } }
@keyframes load-rise { to { opacity: 1; transform: none; } }

/* ---- App pages: tools people work in. Quieter than the home page, same type and colours. ---- */
.app main { padding-bottom: var(--sp-9); }
.panel { background: var(--surface); padding: var(--pad); }
.panel h2 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--sp-4); }
.field { margin-top: var(--sp-5); }
.field > label, .field > legend { display: block; font-weight: 500; font-size: var(--fs-ui); margin-bottom: var(--sp-2); padding: 0; }
fieldset.field { border: 0; margin-inline: 0; padding: 0; }
.input { width: 100%; height: var(--control); padding: 0 14px; border: var(--border) solid var(--step); background: var(--surface); font: inherit; font-size: var(--fs-ui); border-radius: 0; }
.input:hover { border-color: var(--line); }
.input:focus { border-color: var(--ink); outline: none; }
.hint { color: var(--muted); font-size: var(--fs-small); line-height: 1.45; margin: var(--sp-2) 0 0; }
.error { color: var(--negative); background: var(--negative-bg); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0 0; font-size: var(--fs-ui); }
.choices { display: grid; gap: var(--sp-2); }
.choice { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border: var(--border) solid var(--step); cursor: pointer; min-height: 52px; transition: border-color var(--t-hover); }
.choice:hover { border-color: var(--line); }
.choice:has(input:checked) { border-color: var(--ink); }
.choice input { margin: 4px 0 0; accent-color: var(--ink); width: 18px; height: 18px; flex: none; }
.choice b { display: block; font-weight: 600; }
.choice span { color: var(--muted); font-size: var(--fs-small); }
.choice .price { margin-left: auto; font-weight: 600; white-space: nowrap; }
.colors { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.colors label { position: relative; cursor: pointer; }
.colors input { position: absolute; opacity: 0; }
.colors i { display: block; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--swatch-edge); }
.colors input:checked + i { outline: 3px solid var(--ink); outline-offset: 3px; }
.colors input:focus-visible + i { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.stage { position: relative; background: var(--step); min-height: 480px; display: grid; place-items: center; }
.stage model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; --poster-color: transparent; }
.state { max-width: 340px; text-align: center; color: var(--muted); padding: var(--sp-5); }
.state strong { color: var(--ink); }
.bar { height: 6px; background: var(--line); margin: var(--sp-3) 0 var(--sp-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s; }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: var(--border) solid var(--ink); }
.total strong { font-size: var(--fs-title); letter-spacing: var(--track-figure); font-weight: 600; }
.empty { padding: var(--pad); background: var(--surface); color: var(--muted); }
.empty a { color: var(--ink); }
.ok-msg { background: var(--positive-bg); color: var(--positive-ink); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-5); }
@media (prefers-reduced-motion: reduce) { .bar i { transition: none; } }
.legal { display: flex; gap: var(--sp-5); padding-block: var(--sp-7) var(--sp-6); font-size: var(--fs-small); color: var(--muted); }
.legal a { color: inherit; }
.legal a:hover { color: var(--ink); }

/* Loading placeholders: grey shapes where the content will land, so the page has its layout before the data arrives. */
.skel { background: var(--step); border-radius: var(--radius, 0); }
@media (prefers-reduced-motion: no-preference) {
  .skel { animation: skel-pulse 1.4s ease-in-out infinite; }
}
@keyframes skel-pulse { 50% { opacity: 0.55; } }

/* ===== The monolith in 3D =====
   The logo as a real object: drag it sideways to turn it (it turns on its own until you touch it).
   --fill (0 to 1) builds it layer by layer, like the printer: 0 is an empty outline, 1 the finished piece.
   Markup: <div class="mono3d" data-mono3d></div>; site.js adds the faces. */
.mono3d { --w: 92px; --d: 62px; --h: 240px; --lh: 10px; --fill: 1; --ry: -32deg; --rx: -14deg;
  position: relative; display: grid; place-items: center; width: 100%; min-height: calc(var(--h) + 120px);
  perspective: 1200px; isolation: isolate; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.mono3d.arrastando { cursor: grabbing; }
.mono3d .obj { position: relative; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.mono3d .f { position: absolute; left: 0; top: 0; width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  backface-visibility: hidden;
  /* layer lines over the colour that has been "printed" so far; above it only the outline */
  background:
    linear-gradient(to top, transparent calc(var(--fill) * 100% - 3px), var(--mono-top) calc(var(--fill) * 100% - 3px) calc(var(--fill) * 100%), transparent calc(var(--fill) * 100%)),
    repeating-linear-gradient(to top, transparent 0 calc(var(--lh) - 2px), rgb(14 14 16 / 0.35) calc(var(--lh) - 2px) var(--lh)),
    linear-gradient(to top, var(--c) calc(var(--fill) * 100%), rgb(255 255 255 / 0.03) calc(var(--fill) * 100%));
  box-shadow: inset 0 0 0 var(--border) rgb(196 181 253 / 0.18); }
.mono3d .fr { --c: var(--mono-front); transform: translateZ(calc(var(--d) / 2)); }
.mono3d .bk { --c: var(--mono-back); transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.mono3d .rt, .mono3d .lf { width: var(--d); margin-left: calc(var(--d) / -2); }
.mono3d .rt { --c: var(--mono-side); transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.mono3d .lf { --c: var(--mono-left); transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.mono3d .tp { height: var(--d); margin-top: calc(var(--d) / -2); background: var(--mono-top); box-shadow: none;
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); opacity: clamp(0, (var(--fill) - 0.97) * 40, 1); }
/* its shadow on the table */
.mono3d::after { content: ""; position: absolute; left: 50%; top: calc(50% + var(--h) / 2 - 8px); width: calc(var(--w) * 2.2); height: 28px; translate: -50% 0;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.55), transparent); z-index: -1; opacity: calc(0.25 + var(--fill) * 0.75); }
.mono3d:focus-visible { outline-offset: -6px; }
@media (max-width: 600px) { .mono3d { --w: 74px; --d: 50px; --h: 196px; --lh: 8px; } }

/* Where you are in the journey: photo and 3D model, miniature, delivery, follow the order.
   Four thick bars, like layers: done in ink, the current one in indigo, the rest still to print. */
.trilha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); list-style: none; margin: 0 0 var(--sp-5); padding: 0; max-width: 720px; font-size: var(--fs-small); color: var(--muted); }
.trilha li { padding-top: var(--sp-2); border-top: 6px solid var(--step); line-height: 1.3; }
.trilha li.feito { border-top-color: var(--ink); color: var(--ink); }
.trilha li[aria-current] { border-top-color: var(--accent); color: var(--ink); font-weight: 600; }
.trilha a { text-decoration: none; }
.trilha a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The 3D viewer says how to use it, once a model is on screen. */
.stage:has(model-viewer)::before { content: "Arraste para girar"; position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 2; padding: 6px 10px; background: var(--ground); color: var(--muted); font-size: var(--fs-small); line-height: 1.3; pointer-events: none; }

/* The cart, on a phone, stays in sight next to the menu once something is in it. */
.nav .nav-cart { display: none; }
@media (max-width: 900px) {
  .nav .nav-cart:not([hidden]) { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; margin-left: auto; font-size: var(--fs-ui); text-decoration: none; }
  .nav .nav-cart b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; background: var(--accent); color: var(--on-accent); font-size: var(--fs-small); }
  .nav .nav-cart:not([hidden]) + .menu-btn { margin-left: 0; }
}