/* Proposta Petgraf: shared styles of every quote page. Built from the Angel quote (american-version/angel). */
@font-face { font-family:Lato; font-weight:400; font-display:swap; src:url(fontes/Lato-Regular.ttf) format("truetype"); }
@font-face { font-family:Lato; font-weight:700; font-display:swap; src:url(fontes/Lato-Bold.ttf) format("truetype"); }
@font-face { font-family:Lato; font-weight:300; font-display:swap; src:url(fontes/Lato-Light.ttf) format("truetype"); }
@font-face { font-family:"Cormorant Garamond"; font-weight:300 700; font-display:swap; src:url(fontes/CormorantGaramond-VariableFont_wght.ttf) format("truetype"); }
@font-face { font-family:"Cormorant Garamond"; font-style:italic; font-weight:300 700; font-display:swap; src:url(fontes/CormorantGaramond-Italic-VariableFont_wght.ttf) format("truetype"); }
:root {
  /* each proposal sets these from its proposta.json (cores); these are the Angel values */
  --pet:#09506d; --blue:#6193b0; --water:#bedfe4; --lilac:#d1c4d5; --olive:#738063; --cream:#f7f2f0;
  --ink:#1f3c4a; --muted:#56707c; --line:#d9dfe0; --stock:#fbfaf8; --mesa:#e6dce6;
  --serif:"Cormorant Garamond", Georgia, serif; --sans:Lato, ui-sans-serif, system-ui, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
* { box-sizing:border-box; }
html { overflow-x:clip; -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; font:1rem/1.6 var(--sans); color:var(--ink); background:var(--cream); }
h1, h2 { font-family:var(--serif); font-weight:500; color:var(--pet); line-height:1; letter-spacing:-.01em; margin:0; text-wrap:balance; }
img { display:block; max-width:100%; height:auto; }
:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }

.top { position:fixed; inset:0 0 auto; z-index:20; display:flex; justify-content:space-between; align-items:center; padding:.8rem clamp(1rem,3vw,2.4rem); background:color-mix(in srgb,var(--cream) 86%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent); }
.top img { width:150px; height:auto; }
.pill { font:700 .74rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--pet); padding:.85rem 1.1rem; border-radius:99px; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; gap:.3rem; transition:background-color .2s; }
@media (hover:hover) and (pointer:fine) { .pill:hover { background:var(--blue); } }

.hero { max-width:78rem; margin:0 auto; padding:clamp(7rem,15vh,9rem) clamp(1.2rem,4vw,3rem) 4rem; display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.eyebrow { font:700 .72rem/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin:0 0 1.2rem; }
.hero h1 { font-size:clamp(3.2rem,7vw,6.4rem); }
.hero h1 em { font-style:italic; color:var(--blue); }
.intro { font-size:1.08rem; color:var(--muted); max-width:34rem; margin:1.4rem 0 2rem; }
.toc { display:flex; flex-wrap:wrap; gap:.5rem; }
.toc a { font:700 .8rem/1 var(--sans); color:var(--pet); text-decoration:none; padding:.8rem 1rem; border:1px solid var(--water); border-radius:99px; background:#fff8; min-height:44px; display:inline-flex; align-items:center; transition:background-color .2s, border-color .2s; }
@media (hover:hover) and (pointer:fine) { .toc a:hover { background:var(--water); border-color:var(--water); } }
.hero-art { margin:0; border-radius:20px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(9,80,109,.45); }

.brand { max-width:78rem; margin:0 auto; padding:3rem clamp(1.2rem,4vw,3rem) 5rem; }
.brand h2 { font-size:clamp(2rem,4vw,3rem); margin-bottom:.8rem; }
.brand > p { max-width:44rem; color:var(--muted); margin:0 0 2rem; }
.swatches { list-style:none; margin:0 0 1.6rem; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:.8rem; }
.swatches li { display:grid; gap:.2rem; font-size:.85rem; }
.swatches i { display:block; aspect-ratio:1.6; border-radius:14px; background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.swatches b { color:var(--pet); }
.swatches span { color:var(--muted); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; }
.patterns { display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem; }
.patterns i { aspect-ratio:1; border-radius:14px; background-size:cover; background-position:center; }

/* ---------- product scenes ---------- */
.prod { position:relative; height:240svh; border-top:1px solid var(--line); }
.pin { position:sticky; top:0; height:100svh; display:grid; grid-template-columns:1fr minmax(22rem,30rem); overflow:hidden; }
.stage { position:relative; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 42%, color-mix(in srgb, var(--mesa) 40%, #fff) 0%, var(--mesa) 70%, color-mix(in srgb, var(--mesa) 92%, #000) 100%); }
.stage::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px); pointer-events:none; }
.ps-scene { position:relative; width:var(--sw); aspect-ratio:var(--ar-css,.707); }
.ps-scene { --sw:var(--sw-d); }
.ps-sh { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.ps-sh polygon { fill:rgb(40,24,44); }
.ps2 { position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.ps2 b { position:absolute; inset:0; background:var(--stock) center/100% 100% no-repeat; backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 0 0 .5px rgba(80,70,90,.22); }
.ps2 .b { transform:rotateY(180deg); }
.ps2 b::after { content:""; position:absolute; inset:0; pointer-events:none; background:rgb(30,20,34); opacity:var(--shf,0); border-radius:inherit; }
.ps2 .b::after { opacity:var(--shb,0); }
.round .ps2 b { border-radius:calc(var(--sw) * .045); }

.copy { background:var(--cream); padding:clamp(4.8rem,10vh,6.4rem) clamp(1.2rem,3vw,2.4rem) 1.4rem; display:flex; flex-direction:column; gap:.75rem; overflow-y:auto; }
.num { font:700 .74rem/1 var(--sans); letter-spacing:.12em; color:var(--blue); margin:0; }
.copy h2 { font-size:clamp(2rem,3vw,2.8rem); }
.lead { margin:0; color:var(--muted); }
.specs { margin:.2rem 0 0; display:grid; gap:0; }
.specs div { display:grid; grid-template-columns:8.4rem 1fr; gap:.8rem; padding:.45rem 0; border-top:1px solid var(--line); font-size:.9rem; }
.specs dt { font-weight:700; color:var(--pet); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.9; }
.specs dd { margin:0; }
.lines { display:grid; gap:.6rem; margin-top:.4rem; }
.line { display:grid; grid-template-columns:1fr auto; gap:.8rem; align-items:end; padding:.8rem .9rem; border-radius:14px; background:#fff; box-shadow:0 1px 0 var(--line); transition:opacity .2s; }
.line.off { opacity:.62; }
.qty { display:grid; gap:.3rem; }
.qty span, .sub span { font-weight:700; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
.qty select { font:400 .95rem var(--sans); color:var(--ink); border:1px solid var(--water); border-radius:10px; padding:.6rem .7rem; min-height:44px; background:#fff; width:100%; }
.sub { margin:0; text-align:right; display:grid; gap:.2rem; }
.sub b { font-size:1.05rem; color:var(--pet); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ---------- summary ---------- */
.summary { max-width:60rem; margin:0 auto; padding:clamp(5rem,12vh,7rem) clamp(1.2rem,4vw,3rem); }
.summary h2 { font-size:clamp(2.2rem,4vw,3.2rem); margin-bottom:1.6rem; }
.tbl { overflow-x:auto; background:#fff; border-radius:18px; padding:.4rem 1.2rem; box-shadow:0 20px 40px -30px rgba(9,80,109,.4); }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
th, td { text-align:left; padding:.8rem .4rem; border-bottom:1px solid var(--line); }
td:last-child, tfoot td { text-align:right; white-space:nowrap; }
thead th { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); }
tbody th { font-weight:400; }
tfoot th, tfoot td { border-bottom:0; font-weight:700; color:var(--pet); font-size:1.1rem; }
tfoot .pix th, tfoot .pix td { color:var(--olive); font-size:1rem; }
.actions { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin:1.4rem 0; }
.actions button { font:700 .8rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--pet); border:0; border-radius:99px; padding:1rem 1.4rem; min-height:44px; cursor:pointer; transition:background-color .2s; }
@media (hover:hover) and (pointer:fine) { .actions button:hover { background:var(--blue); } }
.actions p { margin:0; color:var(--olive); font-size:.9rem; }
.terms { margin:0; padding-left:1.1rem; color:var(--muted); font-size:.9rem; display:grid; gap:.4rem; }
.foot { display:flex; align-items:center; gap:1rem; justify-content:center; padding:2rem 1rem 3rem; color:var(--muted); font-size:.85rem; }
.foot p { margin:0; }

/* ---------- phones: the stage is not pinned; each piece plays as it crosses the screen ---------- */
@media (max-width:900px) {
  .hero { grid-template-columns:1fr; padding-top:6rem; }
  .swatches { grid-template-columns:repeat(3,1fr); }
  .patterns { grid-template-columns:repeat(3,1fr); }
  .patterns i:nth-child(n+4) { display:none; }
  .prod { height:auto; }
  .pin { position:relative; height:auto; grid-template-columns:1fr; overflow:visible; }
  .stage { height:62svh; }
  .copy { padding:1.6rem 1.2rem 2.4rem; overflow:visible; }
  .specs div { grid-template-columns:7rem 1fr; }
  .ps-scene { --sw:var(--sw-m); }
  .top img { width:120px; }
}
@media (prefers-reduced-motion:reduce) {
  .prod { height:auto; }
  .pin { position:relative; height:auto; min-height:100svh; }
}

/* several lines (termos): one compact row each, so the whole panel fits the screen */
.lines.many { gap:.35rem; }
.many .line { grid-template-columns:9.5rem 1fr auto; align-items:center; padding:.45rem .7rem; }
.many .qty { display:contents; }
.many .qty span { font-size:.66rem; }
.many .sub span { display:none; }
.many .sub b { font-size:.95rem; }
@media (max-width:900px) { .many .line { grid-template-columns:1fr auto; } .many .qty span { grid-column:1 / -1; } }

/* spot varnish on the round card: the logo catches a moving highlight, masked to the logo shape */
.gloss { position:absolute; inset:0; z-index:1; pointer-events:none; -webkit-mask-size:100% 100%; mask-size:100% 100%;
  background:linear-gradient(110deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.06) calc(var(--gl,50) * 1% - 14%), rgba(255,255,255,.55) calc(var(--gl,50) * 1%), rgba(255,255,255,.06) calc(var(--gl,50) * 1% + 14%), rgba(255,255,255,.06) 100%);
  mix-blend-mode:screen; }

/* a hero without an image: the copy takes the full width */
.hero.solo { grid-template-columns:1fr; max-width:60rem; }

/* ---------- passport (livro): the spread is --sw wide; closed, the book sits on the right half ---------- */
.lv-pose { position:absolute; inset:0; perspective:2600px; perspective-origin:50% 46%;
  transform:translate(var(--tx,0%), var(--ty,0%)) rotate(var(--tilt,0deg)) scale(var(--scale,1)); }
.lv-pose::before { content:""; position:absolute; left:50%; top:92%; width:calc(var(--sw-sh,.5) * 100%); height:16%; translate:-50% 0;
  background:radial-gradient(ellipse, rgba(30,24,20,.3) 0%, transparent 70%); }
.lv-livro { position:absolute; inset:0; transform-style:preserve-3d; transform:translateX(-25%); }
.lv-folha { position:absolute; top:0; left:50%; width:50%; height:100%; transform-style:preserve-3d; transform-origin:left center; }
.lv-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:var(--stock) center/cover no-repeat; }
.lv-frente { transform:translateZ(.3px); }
.lv-verso { transform:rotateY(180deg) translateZ(.3px); --lado:to left; }
/* the gutter: a faint shadow along the spine, plus a little shade on a page while it turns */
.lv-face::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(rgb(30 22 16 / var(--s,0)), rgb(30 22 16 / var(--s,0))),
    linear-gradient(var(--lado,to right), rgb(45 30 20 / .14) 0, rgb(45 30 20 / .04) 3%, rgb(45 30 20 / 0) 7%); }

/* ---------- trio: three panels, two images (outside and inside spreads) ---------- */
[data-scene="trio"] .ps-scene { perspective:1250px; isolation:isolate; }
[data-scene="trio"] .ps-scene::before { content:""; position:absolute; z-index:-1; inset:62% 4% -14%;
  background:radial-gradient(ellipse, rgba(44,28,20,.5) 0%, transparent 70%); opacity:var(--sombra,.28); transform:rotate(-6deg); }
.tr-modelo { position:absolute; inset:0; display:grid; grid-template-columns:.966fr 1fr 1fr; transform-style:preserve-3d;
  transform:translateY(var(--lift,0%)) scale(var(--zoom,1)) rotateX(var(--pitch,0deg)) rotateY(var(--giro,0deg)); }
.tr-painel { position:relative; transform-style:preserve-3d;
  --ve:calc(.07 + var(--vinco-esq,0) * .16); --vd:calc(.07 + var(--vinco-dir,0) * .16); }
.tr-esq { transform-origin:right; transform:translateZ(var(--aba-z,0px)) rotateY(var(--esq,0deg)); }
.tr-dir { transform-origin:left; transform:translateZ(var(--capa-z,0px)) rotateY(var(--dir,0deg)); }
.tr-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background-color:var(--stock); background-size:300% 100%; background-repeat:no-repeat; }
.tr-fora { transform:translateZ(.4px); }
.tr-dentro { transform:rotateY(180deg) translateZ(.4px); }
.tr-esq .tr-fora, .tr-dir .tr-dentro { background-position:0% 0; }
.tr-centro .tr-face { background-position:50% 0; }
.tr-dir .tr-fora, .tr-esq .tr-dentro { background-position:100% 0; }
/* crease shading: a faint shadow along each fold, a little deeper while the panel is bent (inside faces swap sides) */
.tr-face::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right, rgb(45 30 20 / var(--sl,0)) 0, rgb(45 30 20 / 0) 2.6%),
    linear-gradient(to left, rgb(45 30 20 / var(--sr,0)) 0, rgb(45 30 20 / 0) 2.6%); }
.tr-esq .tr-fora { --sr:var(--ve); } .tr-esq .tr-dentro { --sl:var(--ve); }
.tr-dir .tr-fora { --sl:var(--vd); } .tr-dir .tr-dentro { --sr:var(--vd); }
.tr-centro .tr-fora { --sl:var(--ve); --sr:var(--vd); } .tr-centro .tr-dentro { --sl:var(--vd); --sr:var(--ve); }

/* neutral pages (root and 404) */
.vazio { min-height:100svh; display:grid; place-content:center; text-align:center; gap:1rem; padding:2rem; }
.vazio h1 { font-size:clamp(2.6rem,6vw,4.4rem); }
.vazio p { margin:0; color:var(--muted); max-width:30rem; }
.top .nome { margin:0; font:500 1.6rem/1 var(--serif); color:var(--pet); }