/* DecorMix · site (v2): faixa de fotos no topo, linhas de produto, ambientes, orçamento pelo WhatsApp. */

:root{
  color-scheme:only light;   /* sem modo escuro forçado do navegador */
  --canvas:#F3EEE6;
  --ink:#2A2622;              /* preto quente (DecorMix: preto, branco e dourado) */
  --ink-soft:#6A6158;
  --dusk:#241F1A;
  --sun:#F6DDB0;
  --gold:#F5C766;             /* dourado do logo DecorMix (amostrado do PNG) */
  --gold-deep:#B8862E;        /* mesmo dourado, mais fundo: traços finos sobre o creme */
  --gold-text:#8C6420;        /* dourado para texto pequeno sobre creme (~4,7:1) */
  --linen:#DDD3C3;
  --paper:#EAE3D7;
  --line:rgba(42,38,34,.16);
  --line-strong:rgba(42,38,34,.42);
  --gut:clamp(20px,4.2vw,64px);
  --head:72px;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-tab:cubic-bezier(.3,.6,.2,1);
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .05' numOctaves='2' stitchTiles='stitch' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .9' numOctaves='2' stitchTiles='stitch' result='b'/%3E%3CfeBlend in='a' in2='b' mode='multiply'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .2 1.1 0 0 0 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-padding-top:var(--head);-webkit-text-size-adjust:100%}
/* sem scroll suave global: as âncoras do menu pulam o hero em vez de atravessá-lo */
body{margin:0;overflow-x:clip;background:var(--canvas);color:var(--ink);font:400 17px/1.55 var(--f);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,fieldset,legend{margin:0}
img,svg,canvas{display:block}
a{color:inherit}
button{font:inherit;color:inherit}
/* foco: anel escuro (>= 3:1 no creme) com halo dourado junto ao elemento */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--gold);border-radius:1px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h2{font-stretch:118%;font-weight:340;font-size:clamp(32px,4.4vw,64px);line-height:1.04;letter-spacing:-.012em;text-wrap:balance}
.num,.idx,.legend,.note,.hint,.kicker{font-family:var(--f-mono);font-weight:400}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:var(--head);display:flex;align-items:center;gap:clamp(16px,2.6vw,40px);
  padding:0 var(--gut);color:var(--ink);transition:background-color .3s,color .18s,box-shadow .3s}
.site-header[data-over=page]{background:var(--canvas);box-shadow:0 1px 0 var(--line)}
/* logo real da DecorMix (PNG recortado 210x110, sem os pontos e o ®): nome escuro no fundo claro; branco na penumbra */
.logo{display:block;flex:none;text-decoration:none}
.logo img{display:block;height:54px;width:auto}
.logo .lg-w{display:none}
.site-header ul{display:flex;gap:clamp(14px,1.9vw,30px);list-style:none;margin:0;padding:0}
.site-header nav{position:relative}
.site-header nav a{display:block;padding:12px 0;font-size:14px;letter-spacing:.02em;text-decoration:none}
/* uma barrinha dourada só: desliza de item em item no hover/foco e descansa na seção atual (site.js) */
.nav-ind{position:absolute;left:0;bottom:7px;width:1px;height:2px;border-radius:1px;background:var(--gold-deep);pointer-events:none;
  transform-origin:0 50%;transform:translateX(var(--x,0px)) scaleX(var(--w,0));opacity:0;
  transition:transform .42s var(--ease-out),opacity .2s ease-out}
.nav-ind.on{opacity:1}
.nav-ind.snap{transition:none}
@media (prefers-reduced-motion:reduce){.nav-ind{transition:opacity .2s ease-out}}
.btn-head{margin-left:auto;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid currentColor;border-radius:2px;
  font-size:14px;text-decoration:none;white-space:nowrap;transition:background-color .15s ease-out,color .15s ease-out}
.btn-head:hover{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
@media (max-width:1439px){.site-header{gap:clamp(16px,2vw,40px)}.site-header ul{gap:clamp(12px,1.2vw,18px)}.site-header nav a{font-size:13.5px}}
@media (max-width:1100px){.site-header nav{display:none}}
/* celular e tablet: botão de 3 linhas abre as seções num painel sob o header (o mesmo <nav> do desktop) */
.menu-btn{display:none}
@media (max-width:1100px){
  /* só o ícone, sem caixa: herda a cor do header (azul; creme quando a penumbra escurece o topo) */
  .menu-btn{display:inline-block;position:relative;flex:none;width:44px;height:44px;margin-left:4px;padding:0;border:0;border-radius:2px;
    background:none;color:inherit;cursor:pointer}
  .menu-btn i{position:absolute;left:12px;right:12px;height:1.6px;border-radius:1px;background:currentColor;transition:transform .25s var(--ease-out),opacity .2s ease-out}
  .menu-btn i:nth-child(1){top:14.5px}.menu-btn i:nth-child(2){top:20.5px}.menu-btn i:nth-child(3){top:26.5px}
  .menu-open .menu-btn i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-open .menu-btn i:nth-child(2){opacity:0}
  .menu-open .menu-btn i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .site-header.menu-open nav{display:block;position:fixed;left:0;right:0;top:var(--head);padding:6px var(--gut) 18px;color:var(--ink);
    background:var(--canvas);border-top:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(42,38,34,.45);animation:menu-in .22s var(--ease-out)}
  .site-header.menu-open nav ul{display:block}
  .site-header.menu-open nav li+li{border-top:1px solid var(--line)}
  .site-header.menu-open nav a{position:relative;padding:16px 0 16px 16px;font-size:18px;color:var(--ink)}
  .site-header.menu-open nav a.is-cur::before,.site-header.menu-open nav a[aria-current=page]::before{content:"";position:absolute;left:0;top:50%;width:3px;height:22px;
    margin-top:-11px;border-radius:2px;background:var(--gold-deep)}
  .nav-ind{display:none}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.site-header.menu-open nav{animation:none}.menu-btn i{transition:none}}
.i-wa{display:none;width:22px;height:22px}
/* celular (e celular deitado): header compacto de 56px; o pedido fica no botão fixo do WhatsApp */
@media (max-width:600px),(max-height:480px) and (orientation:landscape){
  :root{--head:56px}
  .logo img{height:44px}
  .btn-head{display:none}
  .menu-btn{margin-left:auto}
}

/* ---------- base das fotos recortadas em cover (seção do papel de parede) ---------- */
.plate{position:absolute;left:var(--pl);top:var(--pt);width:var(--pw);height:var(--ph)}
.plate>*,.plate picture{position:absolute}
.plate picture{inset:0}
.photo{width:100%;height:100%}
.kicker{font-size:12px;letter-spacing:.2em;margin-bottom:1.6em;color:var(--gold-text)}

/* ---------- entrada de seção ---------- */
/* entrada: nada nasce escondido. O site.js marca .rv-wait só no que abre ABAIXO da dobra; o que já está na tela
   ao abrir a página aparece pronto (sem quadros vazios na troca de página) */
[data-reveal]{transition:opacity .6s var(--ease-out) calc(var(--d,0) * 80ms),transform .6s var(--ease-out) calc(var(--d,0) * 80ms)}
[data-reveal].rv-wait:not(.in){opacity:0;transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){[data-reveal]{transition:none}[data-reveal].rv-wait{opacity:1;transform:none}}

/* ---------- linhas ---------- */
.linhas{position:relative;background:var(--canvas);padding:clamp(80px,13vh,150px) var(--gut) clamp(72px,11vh,130px);border-top:1px solid var(--line)}
.linhas-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:center;max-width:1400px;margin:0 auto}
.lead{margin-top:18px;color:var(--ink-soft);max-width:42ch}
.tabs{display:none;margin-top:clamp(28px,5vh,48px);border-top:1px solid var(--line)}
.js .tabs{display:block}
.tabs [role=tab]{display:flex;align-items:baseline;gap:18px;width:100%;min-height:52px;padding:14px 0 14px 18px;border:0;border-bottom:1px solid var(--line);
  background:none;text-align:left;cursor:pointer;font-size:clamp(18px,1.6vw,22px);font-stretch:112%;color:var(--ink-soft);
  box-shadow:inset 2px 0 0 transparent;transition:color .15s ease-out,box-shadow .18s ease-out}
.tabs [role=tab]:hover{color:var(--ink)}
.tabs [role=tab][aria-selected=true]{color:var(--ink);box-shadow:inset 2px 0 0 var(--ink)}
.tabs .idx{font-size:12px;letter-spacing:.08em}
.panels{margin-top:24px;min-height:5.4em}
.panel+.panel{margin-top:20px}
.js .panel+.panel{margin-top:0}
.panel h3{font-stretch:112%;font-weight:500;font-size:18px;margin-bottom:6px}
.js .panel h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.panel p{font-size:clamp(17px,1.35vw,20px);max-width:36ch}
.panel:focus-visible{outline-offset:6px}
.mini{position:relative;margin:0;aspect-ratio:1600/1063;overflow:hidden;border-radius:2px;background:#E2D9CD}
.mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease-tab)}
.mini img.on{opacity:1}
@media (prefers-reduced-motion:reduce){.mini img{transition:none}}
/* celular: o mini ambiente vem logo antes das abas, para o toque e a luz caberem no mesmo quadro */
@media (max-width:900px){
  .linhas-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .linhas-text{display:contents}
  .mini{order:1;margin-top:28px}
  .tabs{order:2}
  .panels{order:3}
}

/* ---------- papéis de parede ---------- */
/* padrões desenhados para a proposta; aplicados com multiply, então só escurecem: a luz e a sombra da foto continuam */
.wp{--t-listra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Crect width='8.5' height='10' fill='%23CDBEA5' fill-opacity='.42'/%3E%3Crect x='13.6' width='.9' height='10' fill='%231C2638' fill-opacity='.26'/%3E%3C/svg%3E");
  --t-geo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='56'%3E%3Cpath d='M20 0L40 28L20 56L0 28Z' fill='none' stroke='%231C2638' stroke-opacity='.24' stroke-width='1.1'/%3E%3Cpath d='M20 21L25 28L20 35L15 28Z' fill='%23B9A684' fill-opacity='.5'/%3E%3C/svg%3E");
  background:var(--canvas);padding:clamp(24px,4vh,48px) 0 clamp(80px,12vh,140px)}
.wp-head,.wp-ctrl{max-width:1400px;margin:0 auto;padding:0 var(--gut);box-sizing:content-box}
.wp-head .kicker{margin-bottom:1.2em}
/* recorte da mesma foto do topo: faixa larga em cover; no retrato, foco à esquerda (a parede) */
.wp-frame{position:relative;overflow:hidden;container-type:size;height:clamp(340px,74vh,760px);margin-top:clamp(32px,6vh,64px);background:#E2D9CD;
  --iw:1536;--ih:1024;--fx:0;--fy:.55;
  --pw:max(100cqw,100cqh * var(--iw) / var(--ih));
  --ph:max(100cqh,100cqw * var(--ih) / var(--iw));
  --pl:calc((100cqw - var(--pw)) * var(--fx));
  --pt:calc((100cqh - var(--ph)) * var(--fy))}
@media (orientation:portrait){.wp-frame{height:clamp(340px,64vh,640px)}}
/* parede lisa medida na foto: x 0 a 652, y 37 a 730 (px de 1536x1024); janela, piso e sofá ficam fora */
.wp-wall{left:0;top:3.613%;width:42.448%;height:67.676%;mix-blend-mode:multiply;pointer-events:none}
.wp-l{position:absolute;inset:0;opacity:0;transition:opacity .18s ease-out}
.wp-l.linho,.sw-chip.linho{background:var(--noise) 0 0/150px 150px,linear-gradient(rgba(222,212,194,.45),rgba(222,212,194,.45))}
.wp-l.listra{background:var(--t-listra) 0 0/2.6% auto}
.wp-l.geo{background:var(--t-geo) 0 0/6.4% auto}
.wp:has(input[value=linho]:checked) .wp-l.linho,.wp:has(input[value=listra]:checked) .wp-l.listra,
.wp:has(input[value=geo]:checked) .wp-l.geo{opacity:1}
.wp:has(input[value=linho]:checked) .wp-l.linho{opacity:.6}   /* a trama pesa mais que os desenhos */
.wp-trelica{inset:0;width:100%;height:100%;opacity:0;transition:opacity .25s ease-out}
.wp:has(input[value=trelica]:checked) .wp-trelica{opacity:1}
.wp-dusk{inset:0;background:var(--dusk);mix-blend-mode:multiply;opacity:0;pointer-events:none;transition:opacity .25s ease-out}
.wp:has(input[value=penumbra]:checked) .wp-dusk{opacity:.5}
/* penumbra: a persiana desce e cobre a janela (vidro medido na foto: x 669 a 1358, y 59 a 718 de 1536x1024) */
.wp-blind{left:43.555%;top:5.762%;width:44.922%;height:64.453%;overflow:hidden;pointer-events:none}
.wp-blind i{position:absolute;inset:0;transform:translateY(-101%);transition:transform .8s var(--ease-out);
  background:linear-gradient(180deg,rgba(60,45,30,.14) 0 1px,transparent 1px) 0 0/100% 8.5%,var(--noise) 0 0/170px 170px,var(--linen);
  box-shadow:inset 0 -9px 0 -3px #CBC2B3,inset 0 12px 10px -8px rgba(40,30,20,.35)}
.wp:has(input[value=penumbra]:checked) .wp-blind i{transform:none}
@media (prefers-reduced-motion:reduce){.wp-l,.wp-trelica,.wp-dusk,.wp-blind i{transition:none}}
.wp-ctrl{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-top:20px}
.wp-pick{display:grid;grid-template-columns:repeat(5,76px);gap:14px;min-width:0;border:0;padding:0;margin:0}
.sw{position:relative;display:grid;gap:8px;cursor:pointer}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sw-chip{display:block;aspect-ratio:1;border-radius:2px;background-color:#B9AB98;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s ease-out}
.sw-chip.listra{background:var(--t-listra) 0 0/14px auto,#B9AB98;background-blend-mode:multiply}
.sw-chip.geo{background:var(--t-geo) 4px 0/20px auto,#B9AB98;background-blend-mode:multiply}
.sw-chip.trelica{background:url(img/hero-d-parede.webp?v=2) 6% 30%/900% auto,#C9BDA9}
.sw-chip.linho{background-color:#B9AB98;background-size:90px 90px,auto;background-blend-mode:multiply}
.sw-name{font-size:14px;line-height:1.25;color:var(--ink-soft)}
.sw:hover .sw-chip{box-shadow:inset 0 0 0 1px var(--ink)}
.sw input:checked~.sw-chip{box-shadow:inset 0 0 0 2px var(--ink),inset 0 0 0 4px var(--canvas)}
.sw input:checked~.sw-name{color:var(--ink);font-weight:500}
.sw input:focus-visible~.sw-chip{outline:2px solid var(--ink);outline-offset:3px}
.wp-side{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.wp-luz{border:0;padding:0;margin:0;min-width:0}
.wp-side .note{margin-top:0}

.i-ext{width:14px;height:14px;flex:none}

/* ---------- portfólio ---------- */
.portfolio{padding:clamp(88px,14vh,160px) var(--gut)}
.pf{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,88px);max-width:1400px;margin:0 auto}
.pf-head{position:sticky;top:calc(var(--head) + 40px);align-self:start}
.pf-caption{margin-top:18px;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;color:var(--ink-soft)}
.pf-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.8vw,28px);align-items:start}
.pf-grid img{width:100%;height:auto;border-radius:2px;background:var(--paper);filter:saturate(.9)}
.pf-grid .warm img{filter:saturate(.76) brightness(1.03)}
/* hover das fotos: tilt-card (modelo 9a da spell-ui, data-fx no figure); o quadro corta a luz que segue o cursor */
.pf-grid figure{overflow:hidden;border-radius:2px}
.g1{grid-column:1/5}.g2{grid-column:5/7;margin-top:28%}
.g3{grid-column:1/3}.g4{grid-column:3/7;margin-top:14%}
.g5{grid-column:2/6}
.g6{grid-column:1/3}.g7{grid-column:3/5;margin-top:22%}
.g8{grid-column:1/5}
.g9{grid-column:3/7}
.g10{grid-column:1/4}.g11{grid-column:4/7;margin-top:10%}
.g12{grid-column:2/6}

/* ---------- orçamento ---------- */
.orc{background:var(--canvas);border-top:1px solid var(--line);padding:clamp(88px,14vh,160px) var(--gut) clamp(80px,12vh,140px)}
.orc>*{max-width:1400px;margin-left:auto;margin-right:auto}
.orc h2{text-wrap:balance}
.orc-steps{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);gap:clamp(24px,3vw,48px);margin-top:clamp(40px,7vh,72px);padding-top:28px;border-top:1px solid var(--line-strong)}
.step{border:0;padding:0;min-width:0}
.step legend,.legend{display:flex;align-items:baseline;gap:12px;padding:0;margin-bottom:16px;font-family:var(--f);font-stretch:112%;font-size:19px;font-weight:450}
.legend{font-family:var(--f)}
.step-prod .cg{display:grid;grid-template-columns:5.4rem minmax(0,1fr);gap:8px 12px;align-items:start}
.step-prod .cg+.cg{margin-top:12px}
.cg-l{padding-top:13px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.orc-bottom.no-size{grid-template-columns:minmax(0,1fr)}
.orc-bottom.no-size .vao-step{display:none}
.orc-bottom.no-size .send{max-width:760px}
.num{font-size:12px;letter-spacing:.06em;color:var(--ink-soft)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:2px;font-size:15px;
  background:rgba(243,238,230,.6);transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out}
.chip:hover span{border-color:var(--ink)}
.chip input:checked+span{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--gold)}
.orc-bottom{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);margin-top:clamp(40px,7vh,72px);padding-top:28px;border-top:1px solid var(--line-strong);align-items:start}
.vao-draw{position:relative;aspect-ratio:700/460;max-width:720px}
.vao-draw svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vd-floor{stroke:var(--ink);stroke-width:1.5}
.vd-win{stroke:var(--ink);stroke-width:3}
.vd-cota line{stroke:var(--ink-soft);stroke-width:1.2}
.vd-cota text{font-family:var(--f-mono);font-size:17px;fill:var(--ink)}
.handle{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;touch-action:none;cursor:ew-resize;display:grid;place-items:center}
.handle.h-h{cursor:ns-resize}
.handle::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--canvas),0 2px 8px rgba(42,38,34,.35);transition:transform .15s ease-out}
.handle:hover::before,.handle.dragging::before{transform:scale(1.18)}
.handle:focus-visible{outline-offset:0}
.note{margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--ink-soft);letter-spacing:.02em}
.send .legend,.vao-step .legend{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);font-stretch:100%;font-weight:400}
.msg{padding:20px 22px;background:var(--canvas);border-left:2px solid var(--ink);font-size:17px;line-height:1.6}
.msg b{font-weight:500;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.cta{display:inline-flex;align-items:center;min-height:54px;margin-top:22px;padding:0 26px;border-radius:2px;background:var(--gold);color:var(--ink);
  font-weight:500;font-size:17px;text-decoration:none;transition:background-color .15s ease-out,transform .12s ease-out}
.cta:hover{background:#E8B44F}
.cta:active{transform:translateY(1px)}
/* papel de parede: o passo 3 (luz) não entra na mensagem; o desenho vira parede com listra fina */
.step:disabled{opacity:.42}
.step:disabled .chip input{cursor:default}
.step:disabled .chip:hover span{border-color:var(--line-strong)}
.vao-draw.is-wall .vd-win{fill:url(#vao-wall)}

/* ---------- rodapé compacto: uma faixa (marca + frase, Showroom, Contato com as redes, botão) e a barra inferior ---------- */
.site-footer{--f-rule:1px solid rgba(243,238,230,.16);background:var(--ink);color:var(--canvas);padding:clamp(44px,6vh,64px) var(--gut) 0}
.site-footer>*{max-width:1400px;margin-left:auto;margin-right:auto}
.site-footer :focus-visible{outline-color:var(--canvas)}
.f-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) auto;gap:28px clamp(32px,4vw,64px);align-items:start;padding-bottom:clamp(32px,4.5vh,48px)}
.f-cols{grid-row:1;grid-column:2}
.f-cta{grid-row:1;grid-column:3}
.f-brand{margin:0}
.f-brand img{display:block;height:clamp(48px,4vw,58px);width:auto}
/* slogan do rodapé: no tom dos títulos, com "a sua casa" no dourado do logo */
.f-line{margin-top:14px;font-stretch:118%;font-weight:340;font-size:clamp(20px,1.6vw,24px);line-height:1.15;letter-spacing:-.01em;color:var(--canvas);text-wrap:balance}
.f-line span{color:var(--gold)}
.f-cta{display:inline-flex;align-items:center;gap:14px;min-height:50px;padding:0 20px 0 24px;border-radius:2px;background:var(--gold);color:var(--ink);
  font-weight:500;font-size:16px;text-decoration:none;white-space:nowrap;transition:background-color .15s ease-out}
.f-cta:hover{background:#EDB948}
.f-cta svg,.btn-line svg,.btn-ink svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Showroom (mais larga) e Contato, com os ícones das redes logo abaixo do e-mail */
.f-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px clamp(24px,3vw,48px);align-items:start;
  font-style:normal;font-size:15.5px;line-height:1.55;color:rgba(243,238,230,.86)}
.f-col{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.f-h{margin-bottom:6px;font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,238,230,.66)}
.f-link{display:inline-flex;align-items:center;gap:8px;min-height:28px;text-decoration:underline;text-decoration-color:rgba(243,238,230,.36);text-underline-offset:4px;
  transition:color .15s ease-out,text-decoration-color .15s ease-out}
.f-link:hover{color:var(--canvas);text-decoration-color:var(--canvas)}
.f-go{margin-top:4px}
.f-social{display:flex;gap:4px;margin:4px 0 0 -11px;padding:0;list-style:none}
/* só os ícones, sem círculo (a área de toque de 44px continua, invisível). Com mouse: dourado ao passar e ao clicar
   (dourado no marinho 4,9:1); no celular, só os ícones. No foco por teclado, dourado com anel */
.f-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:rgba(243,238,230,.9);transition:color .15s ease-out}
@media (hover:hover) and (pointer:fine){.f-social a:hover,.f-social a:active{color:var(--gold)}}
.f-social a:focus-visible{color:var(--gold);outline:2px solid var(--gold);outline-offset:3px}
.f-social svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.f-social .fill{fill:currentColor;stroke:none}
/* barra: tudo à esquerda, porque o canto direito é do botão fixo do WhatsApp */
.f-bar{display:flex;flex-wrap:wrap;gap:4px 24px;padding:18px 0 22px;border-top:var(--f-rule);font-size:13px;line-height:1.5;color:rgba(243,238,230,.7)}
@media (max-width:1100px){
  .f-main{grid-template-columns:minmax(0,1fr) auto}
  .f-cta{grid-column:2}
  .f-cols{grid-row:2;grid-column:1/-1}
}
@media (max-width:600px){
  .site-footer{padding-top:44px}
  .f-main{display:block;padding-bottom:32px}
  .f-cta{width:100%;justify-content:space-between;margin-top:24px}
  .f-cols{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:32px}
  .f-bar{flex-direction:column;padding:16px 72px 22px 0}   /* à direita, o botão redondo do WhatsApp */
}
@media (pointer:coarse){.f-link{min-height:44px}.f-col{gap:0}}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .linhas-grid,.pf,.orc-bottom{grid-template-columns:minmax(0,1fr)}
  .orc-steps{grid-template-columns:minmax(0,1fr)}
  .pf-head{position:static}
  .pf-grid{gap:12px}
  .pf-grid figure{grid-column:1/7;margin-top:0}
  .pf-grid .ml{grid-column:1/4}
  .pf-grid .mr{grid-column:4/7;margin-top:18%}
  .pf-grid .mR{grid-column:2/7}
  .pf-grid .mL{grid-column:1/6}
  .vd-cota text{font-size:28px}
}
@media (pointer:coarse){
  .chip span{min-height:44px}
  .site-header nav a{padding:14px 0}
  .btn-head{min-height:44px}
}

/* ---------- celular: mesmo acabamento do desktop (CREATIVE-DIRECTION, "Celular: padrão de acabamento") ---------- */
@media (max-width:600px){
  body{line-height:1.5}
  .lead,.panel p{font-size:17px;text-wrap:pretty}
  /* respiro de 64 a 80 px entre seções, sem vazios */
  .linhas{padding:72px var(--gut) 64px}
  .wp{padding:16px 0 72px}
  .portfolio,.orc{padding:72px var(--gut)}

  /* linhas: título, intro, mini ambiente, abas em botões compactos e a descrição logo abaixo */
  .mini{margin-top:24px}
  .tabs,.js .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px;border-top:0}
  .tabs [role=tab]{align-items:center;gap:8px;min-height:48px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:2px;
    font-size:15px;font-stretch:106%;line-height:1.2;color:var(--ink);box-shadow:none}
  .tabs [role=tab][aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--canvas);box-shadow:none}
  .tabs .idx{font-size:11px;opacity:.72}
  .panels{margin-top:16px;min-height:3em}
  /* papel de parede: recorte 4:5 da parede, amostras numa linha rolável, Dia/Penumbra abaixo */
  .wp-frame{height:auto;aspect-ratio:4/5;margin-top:28px}
  .wp-ctrl{display:block;margin-top:16px}
  /* as cinco amostras cabem na largura (sem rolagem escondida) */
  .wp-pick{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .sw-name{font-size:12px}
  .wp-side{margin-top:14px}
  .step-prod .cg{grid-template-columns:minmax(0,1fr);gap:8px}
  .cg-l{padding-top:0}
}

/* ---------- botão secundário (linhas: "Pedir orçamento desta linha") ---------- */
.btn-line,.btn-ink{display:inline-flex;align-items:center;gap:14px;min-height:50px;padding:0 18px 0 22px;border:1px solid var(--ink);border-radius:2px;
  font-size:16px;text-decoration:none;white-space:nowrap;transition:background-color .15s ease-out,color .15s ease-out}
.btn-line:hover{background:var(--ink);color:var(--canvas)}
.btn-ink{background:var(--ink);color:var(--canvas);font-weight:500}
.btn-ink:hover{background:#3A342E}
.btn-line svg,.btn-ink svg{transition:transform .2s var(--ease-out)}
.btn-line:hover svg,.btn-ink:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.btn-line svg,.btn-ink svg{transition:none}}
.linhas-more{margin-top:clamp(28px,4vh,40px);display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px}
.linhas-more .pc-a{margin-top:0;padding-top:0}
.pc-im{display:block;width:100%;height:100%}
@media (max-width:900px){.linhas-more{order:4;margin-top:24px}}

/* ---------- produtos: as 9 linhas da DecorMix, na ordem do site atual ---------- */
.prod{position:relative;z-index:2;padding:clamp(96px,14vh,168px) var(--gut) clamp(88px,12vh,150px);background:var(--canvas)}
.prod-head{max-width:1400px;margin:0 auto clamp(52px,8vh,96px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  column-gap:clamp(24px,5vw,96px);align-items:end}
.prod-head .kicker{grid-column:1/-1}
.prod-head .lead{margin:0;max-width:40ch}
.prod-grid{max-width:1400px;margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(44px,6vh,72px) clamp(20px,2.4vw,40px)}
.pc{display:flex;flex-direction:column;min-width:0}
.pc-ph{margin:0 0 20px;aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--paper)}
.pc-ph img{display:block;width:100%;height:100%;object-fit:cover}
.pc-k{margin:0 0 10px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text)}
.pc-t{font-stretch:112%;font-weight:420;font-size:clamp(19px,1.5vw,23px);line-height:1.18;letter-spacing:-.006em;text-wrap:balance}
.pc-d{margin-top:10px;font-size:15px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}
.pc-a{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding-top:14px;
  font-size:14.5px;letter-spacing:.01em;color:var(--ink);text-decoration:none;background:linear-gradient(var(--gold-deep),var(--gold-deep)) 0 calc(100% - 9px)/0 1px no-repeat;
  transition:background-size .35s var(--ease-out)}
.pc-a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)}
.pc-a:hover{background-size:calc(100% - 28px) 1px}
.pc-a:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.pc-a,.pc-a svg{transition:none}}
@media (max-width:860px){
  .prod-head{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .prod{padding:72px var(--gut) 64px}
  .prod-head{margin-bottom:40px}
  .prod-grid{gap:36px 14px}
  .pc-ph{margin-bottom:14px}
  .pc-k{font-size:10.5px;letter-spacing:.16em;margin-bottom:8px}
  .pc-t{font-size:17px}
  .pc-d{font-size:14px;line-height:1.5}
  .pc-a{font-size:14px;gap:8px}
}

/* ---------- páginas de linha (geradas por tools/linhas.py a partir de tools/linhas/*.json) ----------
   Topo com título e capa, texto da DecorMix com ficha, modelos (cartões da vitrine), ambientes em colunas,
   outras linhas e o pedido. Na de persianas, o topo é a própria seção da janela da landing. */
.lp-h1{font-stretch:118%;font-weight:340;font-size:clamp(38px,5.2vw,78px);line-height:1.02;letter-spacing:-.014em;text-wrap:balance}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.lp-models,.lp-gal,.lp-more{padding:clamp(88px,13vh,150px) var(--gut) 0}
.lp-more{padding-bottom:clamp(72px,10vh,112px)}
.lp-head{max-width:1400px;margin:0 auto clamp(40px,6vh,72px)}
.lm-grid{max-width:1400px;margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(44px,6vh,72px) clamp(18px,2.4vw,40px)}
.lm{min-width:0}
.lm-i{margin-top:12px;font-family:var(--f-mono);font-size:12.5px;line-height:1.7;color:var(--ink-soft)}
.lg-grid{max-width:1400px;margin:0 auto;columns:3 280px;column-gap:clamp(14px,1.8vw,28px)}
.lg-grid figure{break-inside:avoid;margin:0 0 clamp(14px,1.8vw,28px);overflow:hidden;border-radius:2px;background:var(--paper)}
.lg-grid img{width:100%;height:auto;filter:saturate(.92)}
.lo-grid{max-width:1400px;margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px clamp(14px,1.6vw,24px)}
.lo{display:block;text-decoration:none}
.lo-ph{aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:var(--paper);margin-bottom:12px}
.lo-ph img{width:100%;height:100%;object-fit:cover}
.lo .pc-k{display:block;margin-bottom:4px}
.lo-t{display:block;font-stretch:112%;font-weight:420;font-size:16px;line-height:1.25;text-wrap:balance}
.lo:hover .lo-t{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1100px){.lm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .lo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){
  .lp-models,.lp-gal,.lp-more{padding-top:72px}
  .lm-grid{gap:36px 14px}
  .lm-i{font-size:11.5px}
  .lg-grid{columns:2;column-gap:12px}
  .lg-grid figure{margin-bottom:12px}
  .lo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .lo-t{font-size:15px}
}
.lm-none{display:flex;align-items:flex-end;padding:clamp(16px,1.6vw,24px);border-top:2px solid var(--gold)}
.lm-none span{font-stretch:118%;font-weight:340;font-size:clamp(26px,2.6vw,40px);line-height:1;letter-spacing:-.01em;color:var(--ink-soft)}
/* movimento reduzido: o que espera abaixo da dobra já nasce visível (vence o :not(.in) da regra de entrada) */
@media (prefers-reduced-motion:reduce){[data-reveal].rv-wait:not(.in){opacity:1;transform:none}}

/* ---------- menu: "Produtos" abre a lista das 9 linhas ---------- */
.has-sub{position:relative}
.has-sub>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:translateY(-3px) rotate(45deg);opacity:.7}
.site-header .sub{position:absolute;top:100%;left:-20px;z-index:2;display:block;min-width:290px;padding:10px 0;background:var(--canvas);
  border:1px solid var(--line);border-radius:2px;box-shadow:0 22px 40px -22px rgba(42,38,34,.45);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease-out,transform .22s var(--ease-out),visibility 0s linear .22s}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease-out,transform .22s var(--ease-out),visibility 0s}
.site-header .sub a{padding:10px 20px;font-size:14.5px;white-space:nowrap}
.site-header .sub a:hover,.site-header .sub a[aria-current=page]{background:var(--paper)}
@media (prefers-reduced-motion:reduce){.site-header .sub{transition:none}}
@media (max-width:1100px){
  .site-header.menu-open nav{max-height:calc(100vh - var(--head));overflow-y:auto}
  .site-header.menu-open .sub{position:static;min-width:0;padding:0 0 10px;border:0;box-shadow:none;background:none;opacity:1;visibility:visible;transform:none}
  .site-header.menu-open nav .sub li+li{border-top:0}
  .site-header.menu-open .sub a{padding:9px 0 9px 32px;font-size:16px;color:var(--ink-soft)}
  .has-sub>a::after{display:none}
}

/* ---------- topo: faixa de fotos. Troca a cada --hs-time; a barrinha de progresso é o próprio relógio
   (quando ela enche, o site.js passa para a próxima). O mouse em cima não pausa; pausam o botão e o foco de teclado. ---------- */
.hs{--hs-time:4s;position:relative;margin-top:var(--head);height:calc(100vh - var(--head));height:calc(100svh - var(--head));
  min-height:520px;max-height:860px;overflow:hidden;background:var(--paper);touch-action:pan-y}
.hs-slides{position:absolute;inset:0}
.hs-slide{position:absolute;inset:0;display:block;color:var(--ink);text-decoration:none;opacity:0;visibility:hidden;
  transition:opacity .9s var(--ease-out),visibility 0s linear .9s}
.hs-slide.is-on{z-index:1;opacity:1;visibility:visible;transition:opacity .9s var(--ease-out),visibility 0s}
.hs-slide img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%);transform:scale(1.06);backface-visibility:hidden}
/* afastamento contínuo enquanto a foto está na tela (e enquanto sai), numa camada própria da placa de vídeo */
.hs-slide.is-on img,.hs-slide.is-out img{animation:hs-zoom calc(var(--hs-time) + 1.4s) linear both;will-change:transform}
@keyframes hs-zoom{from{transform:scale(1.06)}to{transform:scale(1)}}
/* troca: a foto que sai fica parada e opaca por baixo (sem piscar) enquanto a nova esmaece por cima; o texto antigo sai rápido */
.hs-slide.is-out{opacity:1;visibility:visible;transition:none}
.hs-slide.is-out .hs-copy{opacity:0;transition:opacity .25s ease-out}
/* nome flutuando sobre a foto, sem quadro (pedido do cliente): um véu escuro só no canto de baixo à esquerda, onde fica
   o texto, dá leitura às letras claras sem escurecer o resto da foto */
.hs-slide::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 100% at 0% 100%,rgba(24,20,16,.66) 0,rgba(24,20,16,.42) 40%,rgba(24,20,16,0) 75%)}
.hs-copy{position:absolute;z-index:1;left:var(--gut);bottom:calc(clamp(28px,6vh,64px) + 58px);display:flex;flex-direction:column;align-items:flex-start;
  width:min(760px,calc(100% - 2 * var(--gut)));color:var(--canvas);text-shadow:0 1px 2px rgba(20,16,12,.3),0 4px 30px rgba(20,16,12,.4)}
.hs .hs-copy{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out) .2s,transform .7s var(--ease-out) .2s}
.hs-slide.is-on .hs-copy{opacity:1;transform:none}
.hs-t{font-stretch:118%;font-weight:360;font-size:clamp(52px,6.6vw,108px);line-height:.96;letter-spacing:-.018em;text-wrap:balance}
.hs-go{margin-top:14px;display:inline-flex;align-items:center;gap:10px;padding-bottom:4px;font-weight:500;font-size:16px;
  background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease-out)}
.hs-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)}
.hs-slide:hover .hs-go{background-size:calc(100% - 28px) 1px}
.hs-slide:hover .hs-go svg{transform:translateX(3px)}
.hs-slide:focus-visible{outline-offset:-6px}
/* setas: aparecem ao passar o mouse; no celular, desliza com o dedo. As duas ficam à direita: à esquerda está o cartão
   de texto, que a seta "anterior" cobria */
.hs-arrow{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:56px;height:56px;margin-top:-28px;padding:0;border:0;border-radius:50%;
  background:rgba(243,238,230,.92);color:var(--ink);cursor:pointer;opacity:0;box-shadow:0 8px 24px -12px rgba(42,38,34,.5);
  transition:opacity .25s ease-out,background-color .15s ease-out,transform .25s var(--ease-out)}
.hs-prev{right:calc(var(--gut) + 68px)}
.hs-next{right:var(--gut)}
.hs-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hs:hover .hs-arrow,.hs-arrow:focus-visible{opacity:1}
.hs-arrow:hover{background:var(--canvas)}
.hs-prev:hover{transform:translateX(-2px)}
.hs-next:hover{transform:translateX(2px)}
@media (hover:none){.hs-arrow{display:none}}
/* pontos: logo abaixo do nome (o canto direito é do botão do WhatsApp), em traços claros sobre o véu; a barrinha atual
   enche em --hs-time. O -6px alinha o primeiro traço com o começo do texto */
.hs-bar{position:absolute;left:calc(var(--gut) - 6px);bottom:clamp(28px,6vh,64px);z-index:3;display:flex;align-items:center}
.hs-dots{display:flex}
.hs-dot{position:relative;width:40px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.hs-dot::before,.hs-dot i{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;margin-top:-1px;border-radius:1px}
.hs-dot::before{background:rgba(243,238,230,.4)}
.hs-dot i{background:var(--canvas);transform-origin:0 50%;transform:scaleX(0)}
.hs-dot.is-on i{animation:hs-fill var(--hs-time) linear forwards}
@keyframes hs-fill{to{transform:scaleX(1)}}
.hs.is-paused .hs-dot.is-on i,.hs:has(:focus-visible) .hs-dot.is-on i{animation-play-state:paused}
.hs-play{position:relative;width:40px;height:44px;padding:0;border:0;background:none;cursor:pointer;color:var(--canvas)}
.hs-play i::before,.hs-play i::after{content:"";position:absolute;top:16px;width:3px;height:12px;border-radius:1px;background:currentColor}
.hs-play i::before{left:15px}
.hs-play i::after{left:22px}
.hs.is-paused .hs-play i::before{left:16px;width:0;height:0;border-radius:0;background:none;border-style:solid;border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent currentColor}
.hs.is-paused .hs-play i::after{display:none}
@media (prefers-reduced-motion:reduce){
  .hs-slide,.hs-slide img,.hs .hs-copy{transition:none}
  .hs-slide img,.hs-slide.is-on img,.hs-slide.is-out img{transform:none;animation:none}
  .hs-dot i{animation:none}
  .hs-dot.is-on i{transform:none}
  .hs-play{display:none}
}
@media (max-width:600px){
  .hs{height:min(82vh,700px);height:min(82svh,700px);min-height:480px}
  .hs-copy{left:16px;width:calc(100% - 32px);bottom:72px}
  .hs-t{font-size:clamp(42px,12.4vw,54px)}
  .hs-go{margin-top:10px}
  .hs-bar{left:10px;bottom:16px}
  .hs-dot{width:34px}
}

/* ---------- WhatsApp: botão grande fixo no canto, em todas as páginas ---------- */
.wa-float{position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:60;display:inline-flex;align-items:center;gap:12px;
  height:60px;padding:0 26px 0 18px;border-radius:30px;background:#167D43;color:#fff;font-weight:500;font-size:16px;text-decoration:none;
  box-shadow:0 12px 30px -12px rgba(15,60,35,.6);transition:transform .2s var(--ease-out),background-color .15s ease-out}
.wa-float svg{width:30px;height:30px;flex:none}
.wa-float:hover{background:#12693A;transform:translateY(-2px)}
.wa-float:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--gold)}
@media (max-width:600px){
  .wa-float{width:60px;padding:0;justify-content:center}
  .wa-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.wa-float{transition:none}}

/* ---------- subpáginas (tools/linhas.py): fotos no topo (a mesma faixa .hs da página inicial), o texto da DecorMix logo abaixo ---------- */
.lp-hero{position:relative;margin-top:var(--head);height:min(74vh,760px);min-height:420px;overflow:hidden;background:var(--paper)}
.lp-hero .hs-copy{z-index:2;width:min(680px,calc(100% - 2 * var(--gut)));opacity:1;transform:none}   /* o título não troca com a foto */
.lp-hero .crumb{margin:0;color:var(--canvas)}
.lp-hero .lp-h1{margin-top:12px;font-size:clamp(40px,5vw,80px);line-height:1}
.lp-textsec{padding:clamp(64px,10vh,112px) var(--gut)}
.lp-text-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,88px);align-items:start}
.lp-text{max-width:66ch;font-size:clamp(17px,1.25vw,19px);line-height:1.7}
.lp-text p{margin:0 0 1em}
.lp-text h2{margin:1.8em 0 .6em;font-stretch:112%;font-weight:420;font-size:clamp(22px,1.9vw,27px);line-height:1.2;letter-spacing:-.006em}
.lp-text>:first-child{margin-top:0}
.lp-text ul{margin:0 0 1.2em;padding-left:1.15em}
.lp-text li{margin:.35em 0}
.lp-text li::marker{color:var(--gold-deep)}
.lp-side{position:sticky;top:calc(var(--head) + 32px);display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2.4vw,34px);
  background:var(--paper);border-top:2px solid var(--gold);border-radius:2px}
.lp-side h2{font-size:clamp(24px,2.2vw,32px)}
.lp-side p{margin-top:12px;font-size:16px;color:var(--ink-soft)}
.lp-side .btn-line{margin-top:22px}
/* WhatsApp em destaque: negrito, ícone verde (o do botão fixo), numa linha própria */
.lp-wa{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:14px;font-weight:600;font-size:16.5px;color:var(--ink);text-decoration:none}
.lp-wa .wa-i{width:26px;height:26px;flex:none;color:#167D43}
.lp-wa svg:last-child{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)}
.lp-wa:hover{text-decoration:underline;text-decoration-color:#167D43;text-underline-offset:5px}
.lp-wa:hover svg:last-child{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.lp-wa svg:last-child{transition:none}}
@media (max-width:900px){.lp-text-grid{grid-template-columns:minmax(0,1fr)}.lp-side{position:static}}
@media (max-width:600px){
  .lp-hero{height:min(66vh,560px);height:min(66svh,560px);min-height:380px}
  .lp-hero .lp-h1{font-size:clamp(34px,9.6vw,42px)}
  .lp-textsec{padding:48px var(--gut) 56px}
  .lp-text{font-size:17px;line-height:1.65}
}
/* listas longas do texto original (coleções, modelos): em colunas, para não virar uma tira comprida */
.lp-text ul.cols{columns:3 170px;column-gap:28px}
.lp-text ul.cols li{break-inside:avoid;margin:0 0 .35em}
/* enquadramento de cada foto do topo: --fp no computador, --fpm no celular (tela em pé) */
@media (orientation:portrait){.hs-slide img{object-position:var(--fpm,var(--fp,50% 50%))}}