/* Serralheria Vitrine (demo). Archetype: metal workshop spec sheet. Ink, steel and concrete, with weld yellow. */
@font-face{font-family:"Big Shoulders Display";src:url(/fonts/demo/big-shoulders-display.woff2) format("woff2");font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:Chivo;src:url(/fonts/demo/chivo.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Shoulders Fallback";src:local("Arial Narrow"),local("ArialNarrow"),local("Arial");size-adjust:78%;ascent-override:118%;descent-override:30%}
@font-face{font-family:"Chivo Fallback";src:local("Arial"),local("ArialMT");size-adjust:106%;ascent-override:90%;descent-override:24%}
.d-site-para-serralheria{
  --ink:#0F1113;--ink2:#171A1D;--steel:#23272B;--rule:rgba(236,234,228,.13);--on:#ECEAE4;--on-m:#A9AEB3;
  --paper:#ECEAE4;--paper2:#E2DFD7;--card:#F6F5F1;--tx:#141618;--mut:#565B61;--line:rgba(20,22,24,.14);
  --yel:#F2C230;--yel-h:#FFD54A;--ok:#3FB868;
  --disp:"Big Shoulders Display","Shoulders Fallback",Arial,sans-serif;--body:Chivo,"Chivo Fallback",Arial,sans-serif;
  --r:6px;--g:max(16px,4vw);--max:1280px;
  margin:0;background:var(--ink);color:var(--tx);font:400 1rem/1.55 var(--body)}
.d-site-para-serralheria :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,fieldset){margin:0}
:where(.sv-top,#conteudo,.sv-foot) a{color:inherit}
.d-site-para-serralheria button,.d-site-para-serralheria input{font:inherit;color:inherit}

/* header */
.sv-top{position:sticky;top:var(--vc-bar);z-index:50;background:rgba(15,17,19,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule);color:var(--on)}
.sv-top-in{padding:0 max(var(--g),calc((100% - var(--max)) / 2));height:60px;display:flex;align-items:center;gap:24px}
.sv-brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;align-self:center}
.sv-foot .sv-brand{height:44px}
.sv-logo{width:38px;height:38px;flex:none}
.sv-logo-sun{fill:var(--yel)}
.sv-logo-gate rect{fill:#D3D6D9}
.sv-word{font:700 1.3rem/1 var(--disp);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.sv-word b{font-weight:800;color:var(--yel)}
.sv-nav{display:none;gap:4px;margin-left:auto}
.sv-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-size:.9375rem;color:var(--on-m);border-radius:var(--r)}
.sv-nav a:hover{color:var(--on);background:var(--steel)}
.sv-top-cta{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r);background:var(--yel);color:var(--ink);font-weight:700;font-size:.9375rem;text-decoration:none}
.sv-top-cta svg{width:20px;height:20px}
.sv-top-cta:hover{background:var(--yel-h)}
@media(min-width:1000px){.sv-nav{display:flex}.sv-top-cta{margin-left:8px}}
@media(max-width:379px){.sv-word{font-size:1.12rem}}
@media(max-width:379px){.sv-top-cta span{display:none}.sv-top-cta{width:48px;justify-content:center;padding:0}.sv-top-cta svg{width:24px;height:24px}}
.d-site-para-serralheria :focus-visible{outline:3px solid var(--yel);outline-offset:2px}
.sv-sec :focus-visible{outline-color:var(--tx)}
.sv-how :focus-visible,.sv-hours :focus-visible{outline-color:var(--yel)}

/* hero + configurator */
.sv-hero{color:var(--on);background:radial-gradient(120% 70% at 85% 0%,#1d2226 0%,var(--ink) 60%);padding:18px max(var(--g),calc((100% - var(--max)) / 2)) 48px}
.sv-kicker{display:flex;align-items:center;gap:10px;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-m)}
.sv-dot{width:8px;height:8px;border-radius:50%;background:var(--yel);box-shadow:0 0 0 4px rgba(242,194,48,.18);flex:none}
.sv-hero h1{margin-top:8px;font:800 clamp(1.6rem,7vw,4.4rem)/1.04 var(--disp);text-transform:uppercase;letter-spacing:0;text-wrap:balance}
.sv-lead{margin-top:8px;max-width:34em;color:var(--on-m);font-size:1rem;line-height:1.45}
.sv-cfg{display:grid;gap:14px}
@media(min-width:900px){
  .sv-hero{padding-top:22px}
  .sv-cfg{grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"head form" "stage form" "stage act";grid-template-rows:auto auto 1fr;gap:0 24px;align-items:start}
  .sv-pin{display:contents}
  .sv-hero-head{grid-area:head;padding-bottom:18px}.sv-hero h1{max-width:none}
  .sv-stage{grid-area:stage}.sv-panel{grid-area:form;border-radius:10px 10px 0 0;border-bottom:0}
  .sv-act{grid-area:act;background:var(--ink2);border:1px solid var(--rule);border-top:0;border-radius:0 0 10px 10px;padding:0 16px 16px}
}

/* stage: the street photo with the drawn gate. Phone: sticky above the options, cropped around the gate. */
.sv-stage{position:sticky;top:calc(var(--vc-bar) + 68px);z-index:5;background:var(--ink);padding-bottom:8px;box-shadow:0 -8px 0 var(--ink),0 14px 18px -14px rgba(0,0,0,.8)}
.sv-pin{display:grid;gap:14px}
.sv-act{display:grid;gap:12px;padding:0 4px}
.sv-view{position:relative;overflow:hidden;border-radius:10px;height:max(300px,min(83vw,56svh));width:100%;margin:0 auto;background:#c9c3b6;isolation:isolate}
.sv-frame{position:absolute;height:169%;top:-44%;left:50%;aspect-ratio:1700/1150;transform:translateX(-48.24%)}
@media(min-width:900px){
  .sv-stage{position:relative;top:auto;padding:0;box-shadow:none;background:none}
  .sv-view{height:auto;aspect-ratio:3/2;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
  .sv-frame{height:130%;top:-18.8%}
}
.sv-frame>picture{position:absolute;inset:0}
.sv-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the opening (in frame %): left 31.412, top 30.435, width 33.647, height 48.174 */
.sv-gap,.sv-leaves,.sv-jamb{position:absolute;left:31.412%;top:30.435%;width:33.647%;height:48.174%}
.sv-gap{overflow:hidden;background:#2a2622}
.sv-gap,.sv-leaves,.sv-jamb,.sv-ground,.sv-rail{opacity:0;transition:opacity .35s}
.is-ready .sv-gap,.is-ready .sv-leaves,.is-ready .sv-jamb,.is-ready .sv-ground,.is-ready .sv-rail{opacity:1}
[data-type=basculante] .sv-gap::after{content:"";position:absolute;inset:0 0 auto;height:22%;background:linear-gradient(rgba(10,8,6,.75),rgba(10,8,6,0));pointer-events:none}
.sv-gap picture{position:absolute;inset:0}
.sv-patio{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.sv-back{position:absolute;inset:0;width:100%;height:100%}
.sv-leaves{container-type:size;perspective:260cqw;perspective-origin:50% 40%}
[data-type=pivotante] .sv-leaves{perspective:120cqw;perspective-origin:50% 50%}
[data-type=basculante] .sv-leaves{perspective:150cqw;perspective-origin:50% 100%}
.sv-leaves{overflow:hidden}
.sv-leaves>*{position:absolute;top:0;height:100%;left:0;width:100%}
.sv-leaves svg{display:block;width:100%;height:100%}
/* motion: motor settles with a small overshoot; by hand it is slower and softer */
.sv-leaf{--t:2.8s;--e:cubic-bezier(.55,.04,.28,1.07);transition:transform var(--t) var(--e),filter var(--t) var(--e);backface-visibility:hidden}
[data-motor=nao] .sv-leaf{--t:4.2s;--e:cubic-bezier(.42,0,.36,1)}
.sv-leaves.is-new>*{animation:sv-in .5s ease-out both}
@keyframes sv-in{from{opacity:0}}
/* contact shadow under each leaf (moves with it) and a light sweep on the metal while it moves */
.sv-leaf::after{content:"";position:absolute;left:-1%;right:-1%;bottom:-3.2%;height:5%;background:radial-gradient(50% 50% at 50% 35%,rgba(18,12,6,.55),rgba(18,12,6,0));z-index:-1;transition:opacity .4s}
.sv-leaf::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 35%,rgba(255,244,220,.28) 48%,transparent 60%) 120% 0/260% 100% no-repeat;mix-blend-mode:screen}
.is-moving .sv-leaf::before{opacity:1;animation:sv-sweep var(--t) var(--e) both}
@keyframes sv-sweep{from{background-position:120% 0}to{background-position:-20% 0}}
[data-type=correr][data-open="1"] .sv-leaf{transform:translateX(-97%)}
[data-type=basculante] .sv-head{height:6%;z-index:2}
[data-type=basculante] .sv-leaf{top:6%;height:94%;transform-origin:50% 0}
[data-type=basculante][data-open="1"] .sv-leaf{transform:rotateX(-82deg);filter:brightness(.6)}
[data-type=pivotante] .sv-leaf{width:50%}
[data-type=pivotante] .sv-leaf.is-l{transform-origin:0 50%}
[data-type=pivotante] .sv-leaf.is-r{left:50%;transform-origin:100% 50%}
[data-type=pivotante][data-open="1"] .sv-leaf.is-l{transform:rotateY(78deg);filter:brightness(.68)}
[data-type=pivotante][data-open="1"] .sv-leaf.is-r{transform:rotateY(-78deg);filter:brightness(.8)}
[data-type=basculante][data-open="1"] .sv-leaf::after,[data-type=pivotante][data-open="1"] .sv-leaf::after{opacity:0}
/* sliding gate: floor rail along the opening and the wall it slides over */
.sv-rail{position:absolute;left:0;width:65.6%;top:78.25%;height:.75%;display:none;background:linear-gradient(#8e9398,#4a4f54 45%,#1d2023);box-shadow:0 2px 3px rgba(20,14,8,.45)}
[data-type=correr] .sv-rail{display:block}
/* over the opening: shade at the jambs and the lintel, and the tree's shadow on the gate */
.sv-jamb{pointer-events:none;overflow:hidden;box-shadow:inset 14px 0 16px -10px rgba(30,20,10,.55),inset -10px 0 12px -8px rgba(30,20,10,.4),inset 0 16px 18px -10px rgba(30,20,10,.55)}
.sv-ts picture,.sv-ts img{display:block;width:100%;height:100%}
.sv-front{position:absolute;inset:0}
.sv-ground{position:absolute;left:30.4%;width:35.6%;top:77.4%;height:3%;background:radial-gradient(50% 50% at 50% 40%,rgba(30,20,10,.45),rgba(30,20,10,0));pointer-events:none}
.sv-fg{position:absolute;left:28.235%;top:21.739%;width:30.588%;height:17.391%;pointer-events:none}
.sv-fg picture,.sv-fg img{display:block;width:100%;height:100%}
/* amber warning lamp on the wall: blinks only while the motor runs */
.sv-lamp{position:absolute;left:65.9%;top:30.9%;width:2.1%;height:auto;filter:drop-shadow(0 2px 2px rgba(20,14,8,.45))}
.sv-lamp-on{opacity:0}
.sv-glow{position:absolute;left:63.8%;top:28.4%;width:6.3%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,176,46,.55),rgba(255,176,46,0));opacity:0;pointer-events:none;mix-blend-mode:screen}
[data-motor=nao] .sv-lamp,[data-motor=nao] .sv-glow{display:none}
.is-moving .sv-lamp-on,.is-moving .sv-glow{animation:sv-blink .6s steps(1) infinite}
@keyframes sv-blink{50%{opacity:1}}
/* controls float on the photo */
.sv-ctl{position:absolute;inset:8px;z-index:6;display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px;pointer-events:none}
.sv-ctl>*{pointer-events:auto}
.sv-tag{position:absolute;right:0;bottom:0;margin:0;padding:4px 10px;border-radius:999px;background:rgba(15,17,19,.72);color:#fff;font-size:.6875rem;line-height:1.3;white-space:nowrap}
.sv-open{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 10px;font-size:.875rem!important;border:0;border-radius:999px;background:rgba(15,17,19,.88);color:#fff;font-weight:700;font-size:.9375rem;cursor:pointer;box-shadow:0 8px 24px -8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);touch-action:manipulation}
.sv-open:hover{background:#000}
.sv-open::after{content:"";position:absolute;inset:-4px}
.sv-moving{position:absolute;left:0;bottom:0;margin:0;padding:5px 11px;border-radius:999px;background:#16191c;box-shadow:0 4px 12px rgba(0,0,0,.35);color:#fff;font-size:.75rem;line-height:1.3;opacity:0;transition:opacity .2s}
[data-motor=sim].is-moving .sv-moving{opacity:1}
@media(min-width:900px){.sv-ctl{inset:12px}.sv-open{min-height:40px}}
.sv-led{width:12px;height:12px;border-radius:50%;background:var(--yel);box-shadow:0 0 0 3px rgba(242,194,48,.25),0 0 10px rgba(242,194,48,.8)}
[data-open="1"] .sv-led{background:var(--ok);box-shadow:0 0 0 3px rgba(63,184,104,.25),0 0 10px rgba(63,184,104,.8)}
[data-motor=nao] .sv-led{background:#c9cdd1;box-shadow:0 0 0 3px rgba(201,205,209,.2)}

/* panel: compact rows, so every tap is seen on the gate above */
.sv-panel{background:var(--ink2);border:1px solid var(--rule);border-radius:10px;padding:14px 12px;display:grid;gap:12px}
.sv-field{border:0;padding:0;min-width:0}
.sv-field legend{padding:0;margin-bottom:6px;font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-m)}
.sv-field legend small{font-size:inherit;font-weight:500;letter-spacing:.04em;text-transform:none}
.sv-opts{display:grid;gap:6px;grid-template-columns:repeat(4,minmax(0,1fr))}
.sv-field-abertura .sv-opts{grid-template-columns:repeat(3,minmax(0,1fr))}
.sv-field-motor .sv-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv-opt{position:relative;display:block;cursor:pointer}
.sv-opt input,.sv-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.sv-opt-in{display:grid;justify-items:center;align-content:center;gap:4px;height:100%;min-height:50px;padding:6px 3px;border:1px solid var(--rule);border-radius:var(--r);background:var(--ink);text-align:center;transition:border-color .15s,background .15s}
.sv-opt-in b{font-weight:600;font-size:.75rem;line-height:1.15}
.sv-opt-in small{display:none}
.sv-opt:hover .sv-opt-in{border-color:rgba(236,234,228,.35)}
.sv-opt input:checked+.sv-opt-in{border-color:var(--yel);background:var(--steel);box-shadow:inset 0 0 0 1px var(--yel)}
.sv-opt input:focus-visible+.sv-opt-in{outline:3px solid var(--yel);outline-offset:2px}
.sv-field-motor .sv-opt-in{grid-auto-flow:column;justify-content:center;align-items:center;gap:8px;min-height:44px}
.sv-vao-hint{margin:6px 0 0;font-size:.75rem;color:var(--yel);min-height:0}
.sv-vao-hint:empty{display:none}
.sv-ic{display:block;width:38px;height:22px;border-radius:3px}
.sv-ic-abertura-correr,.sv-ic-abertura-basculante,.sv-ic-abertura-pivotante,.sv-ic-motor-sim,.sv-ic-motor-nao{background:currentColor;color:var(--on);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;border-radius:0}
.sv-opt input:checked+.sv-opt-in .sv-ic{color:var(--yel)}
.sv-ic-abertura-correr{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 26'%3E%3Cpath d='M2 25h40' stroke='%23000' stroke-width='1.6'/%3E%3Crect x='14' y='6' width='26' height='16' rx='1' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M11 14H2m3-3-3 3 3 3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sv-ic-abertura-basculante{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 26'%3E%3Cpath d='M6 25h32M7 3h30' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M9 5l26 0-4 11H13Z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M22 24v-6m-3 3 3-3 3 3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sv-ic-abertura-pivotante{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 26'%3E%3Cpath d='M2 25h40' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M5 22V5l11 3v17ZM39 22V5l-11 3v17Z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sv-ic-motor-sim{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 26'%3E%3Crect x='15' y='1.5' width='14' height='23' rx='4' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='22' cy='9' r='2.6'/%3E%3Ccircle cx='22' cy='17' r='2.6'/%3E%3C/svg%3E");width:22px}
.sv-ic-motor-nao{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 26'%3E%3Cpath d='M16 24v-9l-3-4a1.6 1.6 0 0 1 2.6-2l2.4 3V4a1.6 1.6 0 0 1 3.2 0v7-9a1.6 1.6 0 0 1 3.2 0v9-7a1.6 1.6 0 0 1 3.2 0v8-5a1.6 1.6 0 0 1 3.2 0v10c0 4-2 8-6 8Z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");width:22px}
.sv-ic-fechamento-chapa,.sv-ic-fechamento-lambri,.sv-ic-fechamento-grade,.sv-ic-fechamento-meia{width:100%;max-width:48px;height:22px;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px #2c3034}
.sv-ic-fechamento-chapa{background:linear-gradient(115deg,rgba(255,255,255,.14),rgba(255,255,255,0) 45%),linear-gradient(180deg,#43484d,#2a2e32)}
.sv-ic-fechamento-lambri{background:repeating-linear-gradient(180deg,#5a6066 0 1px,#3d4247 1px 4px,#2b2f33 4px 5px,#121416 5px 6px)}
.sv-ic-fechamento-grade{background:repeating-linear-gradient(90deg,#5a6066 0 1px,#3a3f44 1px 3px,transparent 3px 7px),linear-gradient(#9fb0b8,#c8cfc9)}
.sv-ic-fechamento-meia{background:linear-gradient(180deg,transparent 0 46%,#2c3034 46% 54%,transparent 54%),repeating-linear-gradient(90deg,#5a6066 0 1px,#3a3f44 1px 3px,transparent 3px 7px) top/100% 50% no-repeat,linear-gradient(180deg,#9fb0b8 0 50%,#3f4449 50%,#2a2e32)}
.sv-field-cor .sv-ic{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.5)}
.sv-ic-cor-preto{background:radial-gradient(70% 70% at 30% 25%,#4a4e52,#1c1e20 60%,#0c0d0e)}
.sv-ic-cor-grafite{background:radial-gradient(70% 70% at 30% 25%,#8a9198,#4c5258 60%,#2a2e32)}
.sv-ic-cor-branco{background:radial-gradient(70% 70% at 30% 25%,#ffffff,#e2e2dd 60%,#a9aaa5)}
.sv-ic-cor-corten{background:radial-gradient(70% 70% at 30% 25%,rgba(255,255,255,.3),rgba(0,0,0,0) 55%,rgba(0,0,0,.45)),image-set(url(/img/demo/site-para-serralheria/corten-120.avif) type("image/avif"),url(/img/demo/site-para-serralheria/corten-120.webp) type("image/webp")) center/cover}
/* the opening size, shared with the quote form */
.sv-vao{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sv-vao .sv-in-b{grid-column:1/-1}
.sv-panel .sv-in{font-size:.75rem;color:var(--on-m)}
.sv-panel .sv-in input{min-height:44px;background:var(--ink);border-color:rgba(236,234,228,.22);color:var(--on)}
.sv-panel .sv-in input::placeholder{color:#7d8389;font-style:italic}
.sv-panel .sv-in input:focus-visible{outline:3px solid var(--yel);border-color:var(--yel)}
.sv-panel .sv-unit i{color:var(--on-m)}
.sv-sum{font-size:.8125rem;line-height:1.4;color:var(--on-m)}
.sv-btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 20px;border-radius:var(--r);background:var(--yel);color:var(--ink);font-weight:700;font-size:1.0625rem;line-height:1.2;text-decoration:none;text-align:center;transition:background .15s,transform .15s}
.sv-btn svg{width:22px;height:22px;flex:none}
.sv-btn:hover{background:var(--yel-h)}
.sv-btn:active{transform:translateY(1px)}
.sv-honest{font-size:.75rem;line-height:1.45;color:var(--on-m)}
@media(min-width:900px){.sv-panel{padding:16px;gap:12px}}

/* shared section frame */
.sv-sec{background:var(--paper);padding:clamp(64px,9vw,120px) max(var(--g),calc((100% - var(--max)) / 2))}
.sv-label{display:inline-flex;align-items:center;gap:10px;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.sv-label::before{content:"";width:22px;height:4px;background:var(--yel);box-shadow:0 0 0 1px rgba(20,22,24,.18)}
.sv-sec h2{margin-top:12px;font:800 clamp(2.2rem,7.4vw,4.2rem)/.94 var(--disp);text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.sv-sec-head{display:grid;gap:4px;margin-bottom:clamp(28px,4vw,48px)}
.sv-sec-head>p:last-child{margin-top:10px;max-width:36em;color:var(--mut);font-size:1.0625rem}
@media(min-width:900px){.sv-sec-head{grid-template-columns:1fr 1fr;align-items:end;gap:4px 48px}.sv-sec-head .sv-label,.sv-sec-head h2{grid-column:1}.sv-sec-head>p:last-child{grid-column:2;grid-row:1/3;margin:0 0 6px}}

/* models */
.sv-cards{list-style:none;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--g);margin:0 calc(-1 * var(--g));padding:4px var(--g) 16px;scrollbar-width:thin}
@media(min-width:700px){.sv-cards{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:0 auto;padding:0;gap:20px}}
@media(min-width:1100px){.sv-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sv-card{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sv-card-img{aspect-ratio:4/3;overflow:hidden;background:#cfccc4}
.sv-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sv-card:hover .sv-card-img img{transform:scale(1.035)}
.sv-card-tx{display:flex;flex-direction:column;gap:8px;padding:18px 18px 8px;flex:1}
.sv-card-k{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.sv-card h3{font:800 2rem/.95 var(--disp);text-transform:uppercase}
.sv-card-tx>p:not([class]){color:#33373c;font-size:.9688rem}
.sv-card-mat{margin-top:auto!important;padding-top:12px;border-top:1px solid var(--line);font-size:.875rem;font-weight:600;display:grid;gap:2px}
.sv-card-mat span{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:700}
.sv-card-a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;text-decoration:none;border-bottom:2px solid var(--yel);align-self:flex-start;margin-bottom:8px}
.sv-card-a:hover{border-color:var(--tx)}
.sv-mats{margin-top:clamp(48px,6vw,80px)}
.sv-models{padding-bottom:clamp(36px,4.5vw,60px)}
.sv-mats h3{font:800 clamp(1.6rem,4.6vw,2.4rem)/1 var(--disp);text-transform:uppercase;max-width:22em;text-wrap:balance}
.sv-mat-grid{margin-top:20px;display:grid;gap:12px}
@media(min-width:800px){.sv-mat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.sv-mat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 14px 20px;display:grid;gap:10px;align-content:start}
.sv-mat h4{font:800 1.5rem/1 var(--disp);text-transform:uppercase;margin-top:4px}
.sv-mat p{color:#33373c;font-size:.9688rem}
.sv-swatch{height:120px;border-radius:var(--r);overflow:hidden;background:#cfccc4}
.sv-swatch picture,.sv-swatch img{display:block;width:100%;height:100%;object-fit:cover}

/* quote */
.sv-quote{background:var(--paper2)}
.sv-quote-in{display:grid;gap:28px}
@media(min-width:960px){.sv-quote-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}}
.sv-quote-p{margin-top:12px;color:var(--mut);font-size:1.0625rem;max-width:34em}
.sv-qform{display:grid;gap:18px}
.sv-qform .sv-field legend{color:var(--mut)}
.sv-chips{display:flex;flex-wrap:wrap;gap:8px}
.sv-chip{position:relative;cursor:pointer}
.sv-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid rgba(20,22,24,.22);border-radius:var(--r);background:var(--card);font-weight:600;font-size:.9375rem}
.sv-chip:hover span{border-color:var(--tx)}
.sv-chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--on);box-shadow:inset 0 -3px 0 var(--yel)}
.sv-chip input:focus-visible+span{outline:3px solid var(--tx);outline-offset:2px}
.sv-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sv-in{display:grid;gap:6px;font-size:.875rem;font-weight:600}
.sv-in input{width:100%;min-height:52px;padding:0 14px;border:1.5px solid rgba(20,22,24,.26);border-radius:var(--r);background:#fff;font-size:1rem;font-weight:400}
.sv-in input::placeholder{color:#767b80}
.sv-in input:focus-visible{outline:3px solid var(--tx);outline-offset:1px;border-color:var(--tx)}
.sv-unit{position:relative;display:block}
.sv-unit input{padding-right:40px}
.sv-unit i{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--mut);font-weight:600}
.sv-quote-r{display:grid;gap:14px}
.sv-photo-note{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px;border-radius:10px;background:var(--ink);color:var(--on)}
.sv-photo-note>svg{width:44px;height:44px;padding:9px;border-radius:var(--r);background:var(--yel);color:var(--ink)}
.sv-photo-note h3{font:800 1.5rem/1 var(--disp);text-transform:uppercase}
.sv-photo-note p{margin-top:6px;color:var(--on-m);font-size:.9375rem}
.sv-photo-note ul{margin-top:10px;padding:0;list-style:none;display:grid;gap:4px;font-size:.9375rem}
.sv-photo-note li{padding-left:18px;position:relative}
.sv-photo-note li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:3px;background:var(--yel)}
.sv-prev{min-height:150px;box-shadow:inset 0 0 0 1px rgba(20,22,24,.1)}
.sv-quote .sv-honest{color:var(--mut)}

/* how */
.sv-how{background:var(--ink);color:var(--on);display:grid;gap:32px}
@media(min-width:900px){.sv-how{grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:64px;align-items:center}.sv-how>*{margin:0}}
.sv-how-img{border-radius:10px;overflow:hidden;aspect-ratio:4/5;max-height:640px;width:100%;justify-self:center}
.sv-how-img img{width:100%;height:100%;object-fit:cover}
.sv-how .sv-label{color:var(--on-m)}
.sv-how .sv-label::before{box-shadow:none}
.sv-steps{list-style:none;padding:0;margin-top:28px;counter-reset:s;display:grid;gap:0}
.sv-steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:2px 12px;padding:18px 0;border-top:1px solid var(--rule)}
.sv-steps li::before{content:counter(s,decimal-leading-zero);grid-row:1/3;font:800 2.2rem/1 var(--disp);color:var(--yel)}
.sv-steps b{font-size:1.125rem;font-weight:700}
.sv-steps span{color:var(--on-m)}

/* area */
.sv-area{display:grid;gap:32px}
@media(min-width:960px){.sv-area{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px 64px;align-items:start}.sv-area>*{margin:0}.sv-area-b{grid-column:1/-1}}
.sv-area-k{margin-top:28px;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.sv-bairros{list-style:none;padding:0;margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.sv-bairros li{padding:8px 12px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);font-weight:600;font-size:.9375rem}
.sv-cities{list-style:none;padding:0;margin-top:24px;display:grid;gap:0}
@media(min-width:600px){.sv-cities{grid-template-columns:1fr 1fr;column-gap:24px}}
@media(min-width:960px){.sv-cities{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}}
.sv-cities li{display:grid;gap:2px;padding:14px 0;border-top:1px solid var(--line)}
.sv-cities b{font:800 1.5rem/1 var(--disp);text-transform:uppercase}
.sv-cities span{color:var(--mut);font-size:.9375rem}
.sv-area-more{margin-top:18px;color:var(--mut)}
.sv-area-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--tx);text-decoration:none;border-bottom:2px solid var(--yel)}
.sv-hours{background:var(--ink);color:var(--on);border-radius:10px;padding:24px;display:grid;gap:10px}

.sv-hours-k{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--yel)}
.sv-hours h3{font:800 2rem/1 var(--disp);text-transform:uppercase}
.sv-now{display:flex;align-items:center;gap:10px;min-height:1.5em;font-weight:600}
.sv-now::before{content:"";width:10px;height:10px;border-radius:50%;background:#7d8389;flex:none}
.sv-now.is-open::before{background:var(--ok);box-shadow:0 0 0 4px rgba(63,184,104,.22)}
.sv-now:empty{display:none}
.sv-hours dl{display:grid;margin-top:6px}
.sv-hours dl div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--rule)}
.sv-hours dt{color:var(--on-m)}
.sv-hours dd{font-weight:700}
.sv-hours dl div.is-today dt{color:var(--on)}
.sv-hours dl div.is-today dt::after{content:" · hoje";color:var(--yel);font-weight:600}
.sv-hours-n{color:var(--on-m);font-size:.875rem}

/* footer */
.sv-foot{background:var(--ink2);color:var(--on);padding:40px max(var(--g),calc((100% - var(--max)) / 2));border-top:1px solid var(--rule)}
.sv-foot-in{display:grid;gap:10px}
.sv-foot p{color:var(--on-m);font-size:.9375rem}
.sv-foot .sv-foot-n{font-size:.8125rem}
@media(min-width:900px){.sv-foot-in{grid-template-columns:auto 1fr;align-items:center;gap:6px 32px}.sv-foot-in .sv-brand{grid-row:1/3}}

@media(prefers-reduced-motion:reduce){.sv-leaf,.sv-ground{transition:none!important}.is-moving .sv-leaf::before{animation:none;opacity:0}.sv-leaves.is-new>*{animation:none}.is-moving .sv-lamp{animation:none}.sv-card-img img{transition:none}}
.sv-quote-l .sv-photo-note{margin-top:24px}
.sv-qgate{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:inset 4px 0 0 var(--yel)}
.sv-qgate[hidden],.sv-qfields[hidden]{display:none}
.sv-qgate p{flex:1;display:grid;gap:2px;font-size:.9375rem}
.sv-qgate span{font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.sv-qgate a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--tx);border-bottom:2px solid var(--yel);text-decoration:none}
.sv-qfields{display:grid;gap:18px}
.sv-qnote{margin:0;font-size:.75rem;line-height:1.45;color:var(--mut)}
@media(max-width:899px){.sv-kicker{display:none}.sv-hero h1{margin-top:0}}
@media(min-width:900px){.sv-pin{display:contents}.sv-act{padding:0 16px 16px}}
@media(min-width:960px){.sv-area-l{grid-column:1;grid-row:1}.sv-hours{grid-column:2;grid-row:1}.sv-area-b{grid-row:2}}
/* round 4: ordering-safe overrides */
@media(min-width:900px){.sv-panel{border-bottom:0;border-radius:10px 10px 0 0;padding-bottom:8px}.sv-act{border-top:0}}
@media(max-width:899px){.sv-hero{background:var(--ink)}.sv-view{transition:height .3s ease}.is-mini .sv-view{height:200px}}
.sv-cards-w{position:relative}
@media(max-width:699px){.sv-cards-w::after{content:"";position:absolute;top:0;bottom:16px;right:calc(-1 * var(--g));width:56px;background:linear-gradient(90deg,rgba(236,234,228,0),var(--paper));pointer-events:none}}
@media(prefers-reduced-motion:reduce){.sv-view{transition:none}}