/* Hayah beta 2.1
   Direção: a foto manda, o texto é pouco e pequeno.
   Par tipográfico didone + sans geométrica (o mesmo princípio de Didot + Futura da De Beers):
   Bodoni Moda nos títulos e no logo, Jost em todo o resto. Rótulos e botões em caixa alta espaçada,
   como em Chopard, Piaget e Roberto Coin. Só preto, branco e um cinza neutro. */
:root{
  --preto:#000;
  --branco:#fff;
  --nevoa:#F4F4F2;
  --cinza:#6A6A6A;
  --linha:rgba(0,0,0,.14);
  --titulo:"Bodoni Moda", Didot, "Times New Roman", serif;
  --texto:"Jost", Futura, "Century Gothic", Arial, sans-serif;
  --gut:clamp(20px,4vw,60px);
  --hh:78px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--hh)}
body{background:var(--branco);color:var(--preto);font:400 16px/1.6 var(--texto);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.wrap{max-width:1400px;margin:0 auto;padding-inline:var(--gut)}
.bloco{padding-block:clamp(64px,8vw,120px)}
h1,h2{font-family:var(--texto);font-weight:300;text-wrap:balance}
h2{font-size:clamp(23px,2.1vw,30px);line-height:1.25;letter-spacing:.01em}
.centro{text-align:center}
.cinza{color:var(--cinza)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Voz pequena em caixa alta: menu, botões, rótulos */
.cx,.menu a,.btn,.lk,.peca h3,.tipos a,.corte span,footer h4,.news button,.migalha{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 34px;background:var(--preto);color:var(--branco);border:1px solid var(--preto);transition:opacity .2s}
.btn:hover{opacity:.72}
.btn.vazado{background:transparent;color:var(--preto)}
.btn.branco{background:var(--branco);color:var(--preto);border-color:var(--branco)}
.btn.largo{width:100%}
.lk{display:inline-block;padding-bottom:5px;border-bottom:1px solid currentColor}
.lk:hover{opacity:.6}

/* Topo */
.aviso{background:var(--preto);color:#fff;text-align:center;font-size:13px;letter-spacing:.04em;padding:8px var(--gut)}
header.site{position:sticky;top:0;z-index:30;background:var(--branco);color:var(--preto);border-bottom:1px solid var(--linha);transition:background .3s,color .3s,border-color .3s}
header.site.sobre{background:transparent;color:var(--branco);border-bottom-color:transparent}
.barra{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--hh)}
.menu{display:flex;gap:clamp(12px,1.4vw,24px)}
.menu a{white-space:nowrap}
.menu a:hover{opacity:.6}
.logo{font:400 27px/1 var(--titulo);font-optical-sizing:none;font-variation-settings:"opsz" 6;letter-spacing:.26em;padding-left:.26em;white-space:nowrap;display:inline-block;will-change:transform}
.acoes{justify-self:end;display:flex;gap:22px;align-items:center}
.acoes svg,.abre svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.1}
.abre{display:none;justify-self:start}
.painel{position:fixed;inset:0;z-index:60;background:var(--branco);color:var(--preto);padding:22px var(--gut) 40px;display:none;flex-direction:column;overflow:auto}
.painel.aberto{display:flex}
.painel .fecha{align-self:flex-end;padding:10px 0 26px}
.painel a{font:300 24px/1.2 var(--texto);padding:16px 0;border-bottom:1px solid var(--linha)}
.painel a.peq{font:400 15px/1.4 var(--texto);border:0;padding:16px 0 0;color:var(--cinza)}

/* Hero */
.hero{position:relative;height:100svh;min-height:600px;margin-top:calc(var(--hh) * -1 - 1px);background:#000;color:#fff;overflow:hidden}
.hero img,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.hero video{opacity:0;transition:opacity 1.6s ease;pointer-events:none}
.hero.vivo video{opacity:1}
.hero-p{position:absolute;z-index:3;right:var(--gut);bottom:clamp(28px,6vh,60px);width:34px;height:34px;padding:0;border:0;background:none;color:#fff;opacity:.6;cursor:pointer;display:grid;place-items:center;transition:opacity .3s ease}
.hero-p[hidden]{display:none}
.hero-p:hover,.hero-p:focus-visible{opacity:1}
.hero-p:focus-visible{outline:1px solid #fff;outline-offset:2px}
.hero-p i{display:block;width:9px;height:11px;border-left:2px solid currentColor;border-right:2px solid currentColor;box-sizing:border-box}
.hero-p.pausado i{width:0;height:0;border:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 34%,transparent 62%,rgba(0,0,0,.6) 100%)}
.hero .fala{position:absolute;z-index:2;left:0;right:0;bottom:clamp(36px,7vh,72px);text-align:center;padding-inline:var(--gut)}
.hero h1{font-size:clamp(24px,2.3vw,34px);line-height:1.2;letter-spacing:.02em}
.hero .lk{margin-top:22px}

/* Peças */
.tipos{display:flex;justify-content:center;gap:clamp(18px,3vw,44px);margin-top:22px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.tipos a{color:var(--cinza);padding-bottom:5px;border-bottom:1px solid transparent}
.tipos a:hover{color:var(--preto);border-bottom-color:var(--preto)}
.trilho{display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none;margin-top:clamp(36px,4vw,56px)}
.trilho::-webkit-scrollbar{display:none}
.peca{flex:0 0 clamp(240px,23.5vw,340px);scroll-snap-align:start;position:relative;text-align:center}
.peca .ft{position:relative;aspect-ratio:1;background:var(--branco);overflow:hidden}
.peca .ft img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(var(--z,1));transform-origin:var(--o,50% 50%);transition:opacity .5s,scale 1.2s cubic-bezier(.2,.7,.2,1)}
.peca:hover .ft img{scale:1.06}
.peca .ft img.b{opacity:0}
.peca:hover .ft img.b{opacity:1}
.peca h3{margin-top:16px;font-family:var(--texto)}
.peca h3 a::after{content:"";position:absolute;inset:0}
.peca .esp{font-size:13.5px;color:var(--cinza);margin-top:2px}
.peca .preco{font-size:16px;margin-top:6px}
.peca .parc{font-size:14px;color:var(--cinza)}
.vertudo{margin-top:clamp(36px,4vw,56px)}
.grade-pecas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);margin-top:40px}
.grade-pecas .peca{flex:none}

/* Editorial: duas fotos, quase sem texto */
.editorial{background:#000;color:#fff}
/* Campanha: díptico de ponta a ponta, com o texto sobre as fotos (mesma lógica do hero) */
.editorial{position:relative;background:#000;color:#fff;overflow:hidden}
.dip{display:grid;grid-template-columns:1fr 1fr;gap:2px;height:min(calc(100svh - var(--hh)),64vw);min-height:440px}
.dip figure{position:relative;overflow:hidden;height:100%;background:#111}
.dip img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.editorial::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.62));pointer-events:none}
.legenda{position:absolute;z-index:2;left:0;right:0;bottom:clamp(32px,6vh,68px);text-align:center;padding-inline:var(--gut)}
.legenda p{margin:10px auto 20px;color:rgba(255,255,255,.86)}

/* Lapidações, com foto das peças */
.cortes{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(10px,2vw,32px);max-width:1180px;margin:clamp(36px,4vw,56px) auto 0}
.corte{text-align:center}
.corte .ft{position:relative;aspect-ratio:1;overflow:hidden;background:var(--branco)}
.corte .ft img{display:block;width:100%;height:100%;object-fit:contain;transform:translate(calc((.5 - var(--qx,.5)) * var(--s,1) * var(--m,1) * 100%),calc((.5 - var(--qy,.5)) * var(--s,1) * var(--m,1) * 100%)) scale(calc(var(--s,1) * var(--m,1)))}
.corte span{display:block;margin-top:14px}

/* Diamante cultivado */
.cultivado{background:#000;color:#fff}
.cultivado .col{max-width:560px;margin:0 auto;text-align:center}
.cultivado p{margin-top:16px;color:rgba(255,255,255,.78)}
.escala{margin:40px auto 0;max-width:420px}
.escala ol{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid rgba(255,255,255,.28)}
.escala li{padding-top:12px;font:300 20px/1 var(--texto);text-align:center;color:rgba(255,255,255,.32)}
.escala li.in{color:#fff}
.escala .faixa{display:grid;grid-template-columns:repeat(7,1fr);margin-top:12px;font-size:13px;letter-spacing:.06em}
.escala .faixa span{grid-column:1 / span 3;border-top:1px solid #fff;padding-top:8px}
.escala .faixa em{grid-column:4 / span 4;font-style:normal;border-top:1px solid rgba(255,255,255,.28);padding-top:8px;color:rgba(255,255,255,.6)}
.cultivado .lk{margin-top:36px}

/* Showroom */
.showroom{display:grid;grid-template-columns:5fr 6fr;gap:clamp(28px,6vw,100px);align-items:center;max-width:1120px;margin:0 auto;padding:clamp(64px,8vw,120px) var(--gut)}
.showroom .ft{position:relative;aspect-ratio:4/5;overflow:hidden;background:#111}
.showroom .ft img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.showroom .txt{display:flex;flex-direction:column;align-items:flex-start}
.showroom p{margin-top:14px;max-width:40ch;color:#333}
.showroom ul{list-style:none;margin-top:22px;color:var(--cinza)}
.showroom .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* Newsletter + rodapé */
.news{background:#000;color:#fff}
.news .cinza{color:rgba(255,255,255,.7)}
.news form{display:flex;max-width:420px;margin:26px auto 0;border-bottom:1px solid #fff}
.news input{flex:1;min-width:0;border:0;background:none;font:400 16px var(--texto);padding:12px 2px;outline:none;color:#fff}
.news input::placeholder{color:rgba(255,255,255,.6)}
.news .st{margin-top:10px;font-size:14px;color:rgba(255,255,255,.7);min-height:1.5em}
footer{background:#000;color:rgba(255,255,255,.68);padding-block:0 32px;font-size:15px}
footer .topo{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-block:64px 52px;border-block:1px solid rgba(255,255,255,.2)}
footer .flogo{font:400 26px/1 var(--titulo);font-optical-sizing:none;font-variation-settings:"opsz" 6;letter-spacing:.26em;color:#fff}
footer .topo p{margin-top:18px;max-width:30ch}
footer h4{color:#fff;margin-bottom:18px}
footer ul{list-style:none;display:grid;gap:8px}
footer a:hover{color:#fff}
footer .base{display:flex;justify-content:space-between;gap:20px;padding-top:26px;font-size:13.5px;flex-wrap:wrap}

/* ---------- Página de produto ---------- */
.migalha{color:var(--cinza);font-size:12px}
.migalha a:hover{color:var(--preto)}
.pdp{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
.palco-col{position:sticky;top:var(--hh);background:var(--nevoa)}
.palco{position:relative;height:min(calc(100svh - var(--hh) - 112px),62vw);min-height:380px;overflow:hidden}
.palco img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .45s ease}
.palco img.peca{object-fit:contain;mix-blend-mode:multiply;padding:clamp(20px,4vw,64px);transform:scale(calc(var(--z,1) * var(--m,1)));transform-origin:var(--o,50% 50%)}
.palco-col.so-uma .palco{height:min(calc(100svh - var(--hh) - 36px),62vw)}
.palco img.modelo{object-fit:cover;object-position:50% 66%}
.palco img.troca{opacity:0}
.minis{display:flex;justify-content:center;gap:10px;padding:0 20px 26px}
.mini{width:64px;height:64px;padding:0;background:var(--branco);border:1px solid transparent;overflow:hidden;opacity:.62;transition:opacity .25s,border-color .25s}
.mini img{width:100%;height:100%;object-fit:cover}
.mini:hover{opacity:1}
.mini.ativa{opacity:1;border-color:var(--preto)}
.compra{padding:clamp(36px,5vw,84px) clamp(24px,5vw,88px) clamp(48px,6vw,96px);max-width:620px}
.compra h1{font-size:clamp(34px,3.3vw,52px);line-height:1.08;letter-spacing:.005em;margin-top:22px}
.linha-esp{color:var(--cinza);margin-top:8px}
.valor{margin:clamp(24px,3vw,40px) 0 22px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.valor strong{font-weight:400;font-size:24px}
.valor span{color:var(--cinza);font-size:15px}
.contato{display:flex;gap:28px;flex-wrap:wrap;margin-top:22px}
.frase{margin-top:clamp(30px,4vw,48px);font:300 clamp(18px,1.5vw,21px)/1.5 var(--texto);max-width:30ch}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;margin:clamp(30px,4vw,48px) 0 clamp(26px,3vw,36px)}
.specs dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}
.specs dd{font-size:18px;margin-top:3px}
details{border-top:1px solid var(--linha)}
details:last-of-type{border-bottom:1px solid var(--linha)}
details summary{list-style:none;cursor:pointer;padding:16px 0;display:flex;justify-content:space-between;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:16px;line-height:1;letter-spacing:0}
details[open] summary::after{content:"–"}
details p{padding-bottom:18px;color:var(--cinza);font-size:15px}
.cod{margin-top:18px;font-size:13.5px;color:var(--cinza)}
.gema{margin-top:14px;color:var(--cinza)}
.no-colo figure{height:min(86vh,62vw);min-height:320px;overflow:hidden;background:#111}
.no-colo img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.junto{padding-top:clamp(64px,8vw,120px)}

/* ---------- Responsivo ---------- */
@media (max-width:1100px){
  .menu{display:none}
  .abre{display:block}
  .cortes{grid-template-columns:repeat(7,38vw);overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
}
@media (max-width:860px){
  :root{--hh:64px}
  .logo{font-size:21px}
  .tipos{justify-content:flex-start;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .acoes{gap:16px}
  .acoes .some{display:none}
  .showroom,.pdp{grid-template-columns:1fr}
  .palco-col{position:static}
  .palco{height:96vw;min-height:0}
  .compra{max-width:none;padding-top:28px}
  .compra h1{margin-top:14px}
  .no-colo figure{height:120vw}
  .dip{height:118vw;min-height:0}
  .editorial::after{height:60%}
  .peca{flex-basis:70vw}
  .grade-pecas{grid-template-columns:1fr 1fr}
  footer .topo{grid-template-columns:1fr 1fr}
  footer .topo > div:first-child{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}

/* ---------- Movimento ----------
   Tudo é visível por padrão. As classes abaixo só valem quando o script marca <html class="js">. */
@keyframes aproxima{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes sobe{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes letra{from{opacity:0;transform:translateY(.35em);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.hero img,.hero video{animation:aproxima 2.8s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation:sobe 1.1s .7s cubic-bezier(.2,.7,.2,1) both}
.hero .lk{animation:sobe 1.1s .9s cubic-bezier(.2,.7,.2,1) both}
.logo span{display:inline-block}
html.js .logo.entra span{animation:letra 1.2s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 90ms + 150ms)}
html.js .rv{opacity:0;transform:translateY(12px);transition:opacity 1.4s ease,transform 1.6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
html.js .rv.in{opacity:1;transform:none}
/* fotos grandes: surgem num fade lento, assentando de leve, e só depois de carregadas */
html.js .cortina{background:none}
html.js .cortina img{opacity:0;transform:translateY(var(--py,0px)) scale(1.1);transition:opacity 1.8s ease var(--d,0s),transform 2.6s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
html.js .cortina.in img{opacity:1;transform:translateY(var(--py,0px)) scale(1.06)}
/* demais imagens: nunca "estalam" ao terminar de carregar */
html.js img.lz{opacity:0;transition:opacity 1s ease,scale 1.2s cubic-bezier(.2,.7,.2,1)}
html.js img.lz.ok{opacity:1}
html.js .escala li{opacity:0;transition:opacity .6s;transition-delay:calc(var(--i) * 110ms + 300ms)}
html.js .escala.in li{opacity:1}
.corte .ft img{transition:scale 1.2s cubic-bezier(.2,.7,.2,1)}
.corte:hover .ft img{scale:1.05}
@media (prefers-reduced-motion:reduce){
  .hero img,.hero video,.hero h1,.hero .lk,.capa-col img,.capa-col h1,.capa-col p,html.js .logo.entra span{animation:none}
  html.js .rv,html.js .escala li{opacity:1;transform:none;transition:none}
  html.js .cortina img,html.js img.lz{opacity:1;transform:none;transition:none}
}

/* ---------- Páginas secundárias ---------- */
[hidden]{display:none!important}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.menu a[aria-current]{padding-bottom:5px;border-bottom:1px solid currentColor}
a.sub{border-bottom:1px solid currentColor}
h3{font:400 13px/1.4 var(--texto);letter-spacing:.14em;text-transform:uppercase}

/* cabeçalho de página */
.cab-pag{text-align:center;padding-block:clamp(48px,6vw,88px) clamp(28px,3vw,44px)}
.cab-pag h1,.sala-txt h1{font-size:clamp(30px,3vw,44px);line-height:1.15;letter-spacing:.01em}
.cab-pag p{margin-top:10px;color:var(--cinza)}

/* coleção */
/* banner: a foto fica limpa, sem texto por cima, e muda com a categoria (site.js); o título vem logo abaixo */
.capa-col{position:relative;height:clamp(220px,36vh,400px);background:#111;overflow:hidden}
.capa-col img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:opacity .8s ease}
.capa-col img.fora{opacity:0}
.capa-col picture img{animation:aproxima 2.8s cubic-bezier(.2,.7,.2,1) both}
.cab-col{text-align:center;padding-top:clamp(30px,3.6vw,52px)}
.cab-col h1{font-size:clamp(32px,3.4vw,50px);line-height:1.1;letter-spacing:.01em}
.cab-col p{margin-top:8px;color:var(--cinza)}
.filtros{padding-top:clamp(24px,2.8vw,36px)}
.chips{display:flex;justify-content:center;gap:10px clamp(18px,2.6vw,38px);flex-wrap:wrap}
.chips button{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);padding-bottom:5px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.chips button:hover{color:var(--preto)}
.chips button[aria-pressed="true"]{color:var(--preto);border-bottom-color:var(--preto)}
.chips.principais button{font-size:14px}
.chips.finos{margin-top:20px;gap:8px clamp(14px,2vw,28px)}
.chips.finos button{font-size:12.5px;letter-spacing:.12em}
.barra-f{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(24px,3vw,36px);padding:10px 0;border-top:1px solid var(--linha);font-size:14.5px}
.ord select{font:400 14.5px var(--texto);border:0;background:none;color:var(--preto);padding:6px 2px;cursor:pointer}
.grade{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(32px,4vw,60px) clamp(12px,1.6vw,24px);padding-block:clamp(20px,2.4vw,36px) clamp(64px,8vw,110px)}
.grade .peca{flex:none}
.vazio{text-align:center;padding-bottom:clamp(64px,8vw,110px)}
.vazio p{margin-bottom:18px;color:var(--cinza)}
.ajuda{text-align:center;padding-block:clamp(64px,8vw,120px);border-top:1px solid var(--linha)}
.ajuda p{margin-top:10px}
.ajuda .ctas{justify-content:center;margin-top:30px}
.junto{padding-bottom:clamp(72px,9vw,130px)}

/* diamante cultivado */
.capa-escura{background:#000;color:#fff;text-align:center;padding-block:clamp(80px,11vw,160px)}
.capa-escura h1{font-size:clamp(32px,3.8vw,56px);line-height:1.1;letter-spacing:.01em}
.capa-escura p{max-width:44ch;margin:18px auto 0;color:rgba(255,255,255,.8)}
.duas-col{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(32px,6vw,100px);align-items:start}
.duas-col > div > p{margin-top:12px}
.metodos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,56px)}
.metodos h3,.tres h3{padding-bottom:12px;border-bottom:1px solid var(--preto);margin-bottom:14px}
.metodos p{color:#333}
.faixa-foto figure{height:min(72vh,50vw);min-height:300px;overflow:hidden;background:#111}
.faixa-foto img{width:100%;height:100%;object-fit:cover;object-position:62% 34%}
.estreito{max-width:46ch;margin:10px auto 0}
.rola-x{overflow-x:auto;margin-top:clamp(32px,4vw,52px)}
table.comp{width:100%;min-width:640px;border-collapse:collapse;font-size:15.5px}
.comp th,.comp td{text-align:left;padding:15px 16px 15px 0;border-bottom:1px solid var(--linha);font-weight:400;vertical-align:top}
.comp thead th{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;border-bottom-color:var(--preto)}
.comp tbody th{color:var(--cinza);width:24%}
.comp td:nth-child(4){color:var(--cinza)}

/* showroom */
.sala{display:grid;grid-template-columns:1fr 1fr;min-height:min(calc(100svh - var(--hh) - 36px),58vw)}
.sala figure{position:relative;overflow:hidden;background:#111;min-height:420px}
.sala figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.sala-txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(48px,7vw,110px) clamp(24px,7vw,120px)}
.sala-txt p{margin-top:16px;max-width:38ch;color:#333}
.sala-txt .ctas{margin-top:32px}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px)}
.agenda{background:#000;color:#fff;padding-block:clamp(64px,8vw,120px)}
.agenda p{color:rgba(255,255,255,.78)}
.dados{margin-top:36px;border-top:1px solid rgba(255,255,255,.28)}
.dados div{display:grid;grid-template-columns:1fr 2fr;gap:20px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.28)}
.dados dt{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding-top:3px}
.dados dd{color:rgba(255,255,255,.78)}
.form{display:grid;gap:20px}
.form label{display:grid;gap:4px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.form input,.form select,.form textarea{background:none;border:0;border-bottom:1px solid rgba(255,255,255,.5);border-radius:0;color:#fff;font:400 16px/1.5 var(--texto);letter-spacing:0;text-transform:none;padding:9px 2px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:#fff}
.form option{color:#000}
.form .btn{justify-self:start;margin-top:10px}
.agenda .st{margin-top:14px;font-size:14px;color:rgba(255,255,255,.72);min-height:1.5em}

@media (max-width:860px){
  .filtros{overflow:hidden}
  .chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;white-space:nowrap;width:100%}
  .chips button{flex:none}
  .grade{grid-template-columns:1fr 1fr}
  .duas-col,.metodos,.sala,.tres{grid-template-columns:1fr}
  .sala figure{min-height:110vw}
  .dados div{grid-template-columns:1fr;gap:2px}
}

/* diamante cultivado: página editorial em capítulos — muito branco, texto curto, a peça inteira */
.ed-abre{text-align:center;padding-top:clamp(56px,8vw,128px)}
.ed-abre h1{font-size:clamp(30px,3.4vw,52px);line-height:1.12;letter-spacing:.01em}
.ed-abre p{margin-top:16px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cinza)}
.ed-capa{margin-top:clamp(20px,3vw,48px);overflow:hidden}
.ed-capa img{display:block;margin:0 auto;width:auto;max-width:100%;height:min(46vh,62vw);object-fit:contain;transform:scale(var(--z,1))}
.ed-cap{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,6vw,110px);max-width:1180px;padding-block:clamp(16px,2vw,32px)}
.ed-cap figure{overflow:hidden}
.ed-cap figure img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;transform:scale(var(--z,1));transform-origin:var(--o,50% 50%)}
.ed-cap.inv figure{order:2}
.ed-cap h2{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:400}
.ed-cap p{margin-top:22px;font:300 clamp(20px,1.9vw,28px)/1.42 var(--texto);max-width:20ch}
.ed-cap.inv > div{justify-self:end}
.ed-fecha{text-align:center;padding-block:clamp(40px,5vw,72px) clamp(88px,11vw,160px)}
@media (max-width:860px){
  .ed-cap{grid-template-columns:1fr;gap:4px;padding-block:20px;text-align:center}
  .ed-cap.inv figure{order:0}
  .ed-cap.inv > div{justify-self:auto}
  .ed-cap p{max-width:22ch;margin-inline:auto}
  .ed-cap figure img{width:78%;margin:0 auto}
}

/* ---------- Sacola (gaveta lateral) ---------- */
.sacola{position:relative}
.sacola .qtd{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:currentColor;font-size:11px;line-height:16px;text-align:center}
.sacola .qtd::before{content:attr(data-n);color:#fff;mix-blend-mode:difference}
.veu{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .45s ease}
.veu.aberta{opacity:1;pointer-events:auto}
.gaveta{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(460px,100vw);background:var(--branco);color:var(--preto);display:flex;flex-direction:column;transform:translateX(102%);visibility:hidden;transition:transform .6s cubic-bezier(.2,.8,.2,1),visibility 0s .6s}
.gaveta.aberta{transform:none;visibility:visible;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.gaveta header{display:flex;justify-content:space-between;align-items:center;padding:26px clamp(20px,5vw,34px);border-bottom:1px solid var(--linha)}
.gaveta header h2{font-size:22px}
.gaveta .itens{flex:1;overflow:auto;padding:0 clamp(20px,5vw,34px)}
.item{display:grid;grid-template-columns:92px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--linha)}
.item .ft{aspect-ratio:1;background:var(--branco);border:1px solid var(--linha);overflow:hidden}
.item .ft img{width:100%;height:100%;object-fit:contain;transform:scale(1.2)}
.item .nm{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.item .esp{font-size:14px;color:var(--cinza);margin-top:2px}
.item .ln{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;font-size:15.5px}
.item .tira{font-size:13.5px;color:var(--cinza);border-bottom:1px solid currentColor}
.item .tira:hover{color:var(--preto)}
.gaveta .vazia{padding:56px 0;text-align:center}
.gaveta .vazia p{color:var(--cinza);margin-bottom:22px}
.gaveta footer{background:var(--branco);color:var(--preto);padding:22px clamp(20px,5vw,34px) 28px;border-top:1px solid var(--preto);font-size:16px}
.gaveta .sub-l{display:flex;justify-content:space-between;align-items:baseline}
.gaveta .sub-l b{font-weight:400;font-size:19px}
.gaveta .p10{color:var(--cinza);font-size:14px;text-align:right}
.gaveta .gar{font-size:13.5px;color:var(--cinza);margin:14px 0 18px}
.gaveta .consult{display:table;margin:18px auto 0}
html.trava{overflow:hidden}

/* ---------- Checkout ---------- */
.ck-topo{border-bottom:1px solid var(--linha)}
.ck-topo .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--hh)}
.ck-topo .lk{justify-self:start}
.ck-topo .seguro{justify-self:end;color:var(--cinza)}
.ck-grade{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,7vw,120px);align-items:start;padding-block:clamp(40px,5vw,72px) clamp(72px,9vw,130px);max-width:1180px}
.ck-form h1{font-size:clamp(28px,2.6vw,38px);line-height:1.15}
.ck-form fieldset{border:0;margin-top:40px;display:grid;gap:18px}
.ck-form legend{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:12px;border-bottom:1px solid var(--preto);width:100%;margin-bottom:20px}
.ck-form label{display:grid;gap:4px;font-size:13.5px;color:var(--cinza)}
.ck-form input[type=text],.ck-form input[type=email],.ck-form input[type=tel]{border:0;border-bottom:1px solid rgba(0,0,0,.4);border-radius:0;background:none;font:400 16px/1.5 var(--texto);color:var(--preto);padding:8px 2px}
.ck-form input:focus{outline:none;border-bottom-color:var(--preto)}
.dupla{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.opcoes{display:grid;border:1px solid var(--linha)}
.op{display:grid!important;grid-template-columns:auto 1fr;gap:14px!important;align-items:start;padding:16px 18px;cursor:pointer;border-bottom:1px solid var(--linha)}
.op:last-child{border-bottom:0}
.op input{accent-color:#000;margin-top:4px}
.op b{display:block;font-weight:400;font-size:16px;color:var(--preto)}
.op small{font-size:14px;color:var(--cinza)}
.op:has(input:checked){background:var(--nevoa)}
.ck-form .btn{margin-top:36px}
.ck-form .st{margin-top:14px;font-size:14px;color:var(--cinza);min-height:1.5em}
.ck-resumo{position:sticky;top:32px;background:var(--nevoa);padding:clamp(24px,3vw,40px)}
.ck-resumo h2{font-size:22px;padding-bottom:6px}
.totais{margin-top:22px;font-size:16px}
.totais div{display:flex;justify-content:space-between;padding:7px 0}
.totais dt{color:var(--cinza)}
.totais .total{margin-top:10px;padding-top:16px;border-top:1px solid var(--preto);font-size:19px}
.totais .total dt{color:var(--preto)}
.parc10{text-align:right;font-size:14px}
.selos{list-style:none;margin-top:26px;padding-top:20px;border-top:1px solid var(--linha);display:grid;gap:8px;font-size:14.5px;color:var(--cinza)}
.selos a{color:var(--preto)}
@media (max-width:860px){
  .ck-topo .seguro{display:none}
  .ck-topo .wrap{grid-template-columns:1fr auto}
  .ck-topo .logo{order:-1;justify-self:start}
  .ck-topo .lk{justify-self:end}
  .ck-grade{grid-template-columns:1fr}
  .ck-resumo{position:static;order:-1}
}
@media (prefers-reduced-motion:reduce){
  .gaveta,.veu{transition:none}
}

/* ---------- Celular: a home tem desenho próprio — vertical, compacta, sem arrastar para o lado ---------- */
@media (max-width:860px){
  .so-desk{display:none}
  .aviso{font-size:12px;letter-spacing:.01em;padding:7px 10px}
  .bloco{padding-block:48px}

  /* abertura: faixa de foto, não tela cheia; as peças já aparecem logo abaixo */
  .hero{height:auto;min-height:0;aspect-ratio:4/3;margin-top:0}
  .hero img,.hero video{object-position:62% 50%}
  .hero::after{background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.62) 100%)}
  .hero .fala{bottom:20px}
  .hero h1{font-size:22px}
  .hero .lk{margin-top:12px}
  html.js .logo.entra span{animation:none}

  /* tipos numa linha que cabe */
  .tipos{justify-content:center;gap:16px;margin-inline:0;padding-inline:0;overflow:visible;white-space:normal;flex-wrap:wrap;row-gap:8px}
  .tipos a{font-size:12px;letter-spacing:.1em}

  /* peças: grade de duas colunas, seis peças, sem fileira de arrastar */
  #pecas{padding-top:36px}
  .trilho{display:grid;grid-template-columns:1fr 1fr;gap:28px 12px;overflow:visible;margin-top:24px}
  .trilho .peca{flex:none}
  .trilho .peca:nth-child(n+7){display:none}
  .peca h3{margin-top:8px;font-size:12px;letter-spacing:.1em}
  .peca .esp{font-size:12.5px}
  .peca .preco{font-size:15px;margin-top:5px}
  .vertudo{margin-top:36px}

  /* campanha: uma foto só, inteira, com o texto embaixo */
  .editorial{padding:0}
  .editorial::after{display:none}
  .dip{display:block;height:auto;min-height:0;padding:0;overflow:visible}
  .dip figure{height:auto;aspect-ratio:1}
  .dip figure:last-child{display:none}
  .dip img{object-position:50% 30%}
  .legenda{position:static;padding-block:28px 44px}

  /* lapidações: todas à vista, em duas linhas */
  .cortes{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 6px;margin:24px 0 0;padding:0;overflow:visible}
  .corte{flex:0 0 23%}
  .corte .ft img{--m:1.2}
  .corte span{margin-top:4px;font-size:11.5px;letter-spacing:.05em}

  /* showroom: texto primeiro, foto baixa */
  .showroom{gap:24px;padding-block:48px}
  .showroom .ft{order:2;aspect-ratio:16/10}
  .showroom .ft img{object-position:50% 74%}
}

/* ---------- Celular: acertos da revisão de design (06/10) ---------- */
@media (max-width:860px){
  /* home: a foto do showroom ficava cortada no rosto; no celular o bloco fica só com texto e botões */
  .showroom .ft{display:none}
  .showroom .ctas .btn,.sala-txt .ctas .btn{flex:1;padding-inline:12px}
  .sala-txt .ctas,.showroom .ctas{width:100%}
  .btn{white-space:nowrap}
  /* abertura: um pouco mais alta, mostrando brinco e colar */
  .hero{aspect-ratio:5/4}
  .hero img,.hero video{object-position:62% 50%}
  .hero-p{right:8px;bottom:auto;top:8px;opacity:.5}
  /* Joias: filtros inteiros à vista, sem linha cortada nem arrasto */
  .filtros{overflow:visible}
  .chips,.chips.finos{flex-wrap:wrap;justify-content:center;overflow:visible;white-space:normal;width:auto;gap:10px 18px}
  .chips.finos{gap:8px 14px;margin-top:16px}
  .chips.principais button{font-size:13px}
}

/* ---------- Celular: acertos a partir da segunda gravação em iPhone (06/10, 16h) ---------- */
@media (max-width:860px){
  /* imagens aparecem mais rápido: no celular o fade longo deixava caixas vazias ao filtrar e ao abrir a peça */
  html.js img.lz{transition:opacity .35s ease}
  html.js .rv{transition-duration:.6s,.7s;transform:translateY(8px)}
  /* cards: menos branco acima da peça */
  .peca .ft{aspect-ratio:6/5}
  .grade{padding-top:8px;row-gap:26px}
  .barra-f{margin-top:18px}
  /* página de peça: palco mais baixo e peça maior, para não ficar miúda numa caixa grande */
  .palco{height:74vw}
  .palco-col.so-uma .palco{height:74vw}
  .palco img.peca{--m:1.2;padding:14px}
  .palco img.peca:not([style]){--m:1}
  .compra{padding-top:20px}
}

/* ---------- Mais site, menos catálogo (12/10): destaque, presentes, serviços, parecidas, guias ---------- */
.destaque{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:stretch;border-top:1px solid var(--linha)}
.dq-foto{position:relative;display:block;background:var(--nevoa);min-height:min(70vh,46vw);overflow:hidden}
html.js .dq-foto.cortina{background:var(--nevoa)}
.dq-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
html.js .dq-foto.cortina img{transform:scale(calc(var(--z,1) * 1.04))}
html.js .dq-foto.cortina.in img,.dq-foto img{transform:scale(var(--z,1))}
.dq-txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(40px,6vw,96px) clamp(24px,5vw,88px)}
.dq-txt h2{font-size:clamp(30px,3vw,46px);line-height:1.1;margin-top:14px}
.dq-txt > .cinza{margin-top:8px}
.dq-preco{margin:clamp(20px,2.4vw,32px) 0 24px;font-size:22px}
.dq-preco span{font-size:14.5px;color:var(--cinza);margin-left:10px}
.grade-presentes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,24px);margin-top:clamp(32px,4vw,52px)}
.presente{text-align:center}
.presente .ft{aspect-ratio:1;overflow:hidden;background:var(--branco)}
.presente .ft img{width:100%;height:100%;object-fit:contain;transition:scale 1.2s cubic-bezier(.2,.7,.2,1)}
.presente:hover .ft img{scale:1.05}
.presente span{display:block;margin-top:10px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.servicos-f{border-top:1px solid var(--linha);padding-block:clamp(40px,5vw,72px)}
.servicos-f .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px)}
.servicos-f h3{padding-bottom:12px;border-bottom:1px solid var(--preto);margin-bottom:12px}
.servicos-f p{color:var(--cinza);font-size:15px}
.servicos-f a{color:var(--preto)}
.grade-pecas.g4{grid-template-columns:repeat(4,1fr)}
.junto{padding-block:clamp(56px,7vw,100px);border-top:1px solid var(--linha)}
.faixa-p{padding-block:clamp(28px,3.4vw,48px)}
.cab-f{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--preto)}
.cab-f h2{font-size:clamp(21px,1.9vw,26px)}
.faixa-p .grade-pecas{margin-top:28px}
.ed-abre p a{border-bottom:1px solid transparent}
.ed-abre p a:hover{border-bottom-color:currentColor}
.guia{padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--linha);max-width:1180px}
.guia:first-of-type{margin-top:clamp(36px,4vw,60px)}
.guia > h2{margin-bottom:clamp(24px,3vw,40px)}
.g-cortes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px clamp(24px,4vw,64px);margin-bottom:32px}
.g-corte{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center}
.g-corte p{margin-top:6px;color:#333;font-size:15.5px}
table.aros{min-width:0;max-width:none;border-top:1px solid var(--preto)}
table.aros td,table.aros th{padding:11px 12px 11px 0}
.guia .ler{max-width:640px}
@media (max-width:1100px){
  .grade-pecas.g4{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .destaque{grid-template-columns:1fr}
  .dq-foto{min-height:0;aspect-ratio:5/4}
  .dq-txt{padding:26px var(--gut) 44px}
  .grade-presentes{grid-template-columns:1fr 1fr;gap:20px 12px;margin-top:24px}
  .servicos-f .wrap{grid-template-columns:1fr 1fr;gap:28px 16px}
  .cab-f{padding-bottom:10px}
  .g-cortes{grid-template-columns:1fr}
  .g-corte{grid-template-columns:92px 1fr;gap:14px}
  .guia .duas-col{gap:28px}
}

/* lista de termos (guias) e respiro do menu com cinco itens */
.ler{width:100%;border-top:1px solid var(--preto)}
.ler div{display:grid;grid-template-columns:1fr 3fr;gap:18px;padding:15px 0;border-bottom:1px solid var(--linha)}
.ler dt{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding-top:3px}
.ler dd{color:#333;font-size:15.5px}
/* (o menu passou a ser dividido em volta do logo; a letra não precisa mais encolher entre 1101 e 1340 px) */

/* ---------- Catálogo de 32 peças e preço sob consulta acima de R$ 30 mil (12/10) ---------- */
.peca .preco.consulta,.dq-preco.consulta,.valor .consulta{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}
.peca .preco.consulta{margin-top:10px}
.valor .consulta{font-weight:400}
.dq-preco.consulta{margin:clamp(18px,2.2vw,28px) 0 22px}
.grade-presentes{grid-template-columns:repeat(3,1fr);max-width:980px;margin-inline:auto}
@media (max-width:860px){
  .grade-presentes{grid-template-columns:repeat(3,1fr);gap:8px}
  .presente span{font-size:11.5px;letter-spacing:.06em}
}

/* ---------- Sobre nós (12/10) ---------- */
.sobre-capa{position:relative;height:min(calc(100svh - var(--hh) - 36px),56vw);min-height:360px;background:#000;color:#fff;overflow:hidden;display:flex;align-items:flex-end;text-align:center}
.sobre-capa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%;animation:aproxima 2.8s cubic-bezier(.2,.7,.2,1) both}
.sobre-capa::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2) 30%,rgba(0,0,0,.66) 100%)}
.sobre-capa .wrap{position:relative;z-index:1;width:100%;padding-bottom:clamp(36px,7vh,80px)}
.sobre-capa h1{font-size:clamp(34px,4.2vw,64px);line-height:1.08;letter-spacing:.01em;animation:sobe 1.1s .4s cubic-bezier(.2,.7,.2,1) both}
.sobre-capa p{margin-top:14px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82);animation:sobe 1.1s .55s cubic-bezier(.2,.7,.2,1) both}
.manifesto-s{padding-block:clamp(64px,9vw,140px) clamp(24px,3vw,48px);text-align:center}
.manifesto-s p{max-width:30em;margin:0 auto;font:300 clamp(21px,2.2vw,32px)/1.45 var(--texto)}
.ed-cap figure.foto img{aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.sobre-fecha{background:#000;color:#fff;text-align:center;padding-block:clamp(72px,10vw,150px);margin-top:clamp(40px,5vw,72px)}
.sobre-fecha p{font:300 clamp(30px,3.6vw,54px)/1.1 var(--texto);letter-spacing:.01em}
.sobre-fecha .ctas{justify-content:center;align-items:center;gap:28px;margin-top:clamp(28px,3vw,44px)}
.btn.claro{background:#fff;color:#000;border-color:#fff}
.manifesto-h{border-top:1px solid var(--linha);text-align:center;padding-block:clamp(64px,8vw,120px)}
.manifesto-h h2{font-size:clamp(28px,3vw,46px);line-height:1.1}
.manifesto-h p{margin:14px auto 26px;max-width:36ch;color:#333}
@media (max-width:860px){
  .sobre-capa{height:auto;min-height:0;aspect-ratio:4/5}
  .manifesto-s{padding-top:48px}
  .ed-cap figure.foto img{width:100%}
  .manifesto-h{padding-block:52px}
}
@media (prefers-reduced-motion:reduce){
  .sobre-capa img,.sobre-capa h1,.sobre-capa p{animation:none}
}

/* ---------- Vídeo do hero (12/10) ----------
   No celular e no tablet o enquadramento ficou mais fechado nas joias; a frase vai para o canto escuro,
   à esquerda, para não atravessar a riviera. */
@media (max-width:860px){
  .hero .fala{left:20px;right:auto;padding-inline:0;text-align:left;bottom:18px}
  .hero h1{max-width:8.6em;line-height:1.18}
  .hero .lk{margin-top:10px}
}

/* ---------- Capa do Sobre (12/10) ----------
   A home e o Sobre abriam com o mesmo recorte da mesma foto. No computador o Sobre passa a mostrar a parte
   de baixo dela (mão, anel e pulseira), e o título vai para o canto escuro para não cobrir a pulseira. */
@media (min-width:861px){
  .sobre-capa{text-align:left}
  .sobre-capa img{object-position:50% 96%}
  .sobre-capa::after{background:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 46%),linear-gradient(180deg,rgba(0,0,0,.1) 40%,rgba(0,0,0,.4) 100%)}
  .sobre-capa h1{max-width:6.2em}
}

/* ---------- Notas do cliente (13/10): letra maior, menu dividido, banner por categoria, Diamante cultivado com cor ---------- */
/* menu dividido em volta do logo: joias à esquerda, a marca e a sacola à direita */
@media (min-width:861px){
  .acoes{gap:clamp(18px,2.2vw,34px)}
}
/* todo item reserva o espaço do sublinhado, para os dois lados do menu ficarem na mesma altura */
.menu a{padding-bottom:5px;border-bottom:1px solid transparent}
.menu a[aria-current]{border-bottom-color:currentColor}
/* no celular a voz em caixa alta fica em 12px para os botões lado a lado continuarem cabendo */
@media (max-width:860px){
  .cx,.btn,.lk,footer h4,.news button,details summary{font-size:12px;letter-spacing:.12em}
  .capa-col{height:auto;aspect-ratio:16/10}
  .cab-col{padding-top:26px}
}
@media (prefers-reduced-motion:reduce){
  .capa-col picture img{animation:none}
}
footer .base .seg-r{color:rgba(255,255,255,.68)}
.seg-ck{font-size:14px;color:var(--cinza)}

/* Quem é a Hayah: rótulos das duas perguntas que a página responde */
.manifesto-s h2{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:var(--cinza);margin-bottom:clamp(18px,2vw,28px)}
.manifesto-s.seg{padding-top:clamp(36px,4.6vw,72px)}

/* Diamante cultivado: abre com foto de modelo; o painel do texto continua o verde do fundo da própria foto */
.dc-abre{display:grid;grid-template-columns:1fr 1fr;min-height:min(calc(100svh - var(--hh) - 36px),60vw);background:#70826b}
.dc-abre figure{position:relative;overflow:hidden;min-height:440px}
.dc-abre figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.dc-txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(48px,7vw,110px) clamp(24px,6vw,104px)}
.dc-txt h1{font-size:clamp(32px,3.6vw,54px);line-height:1.1;letter-spacing:.01em}
.dc-txt p{margin-top:20px;max-width:32ch;font-size:clamp(17px,1.35vw,20px);line-height:1.5}
.dc-txt .lk{margin-top:32px}
.dc .ed-cap{padding-block:clamp(28px,4vw,64px)}
.dc-abre + .ed-cap{padding-top:clamp(56px,7vw,110px)}
/* escala de cor: do incolor ao amarelado, com a faixa das pedras Hayah em destaque */
.tons-barra{height:clamp(120px,15vw,200px);background:linear-gradient(90deg,#fff 0%,#fdfcf6 33%,#faf5df 55%,#f3e8bb 78%,#e6d083 100%);border:1px solid var(--linha)}
.tons-letras{list-style:none;display:grid;grid-template-columns:repeat(9,1fr);margin-top:14px;font:300 20px/1 var(--texto);text-align:center}
.tons-letras li:nth-child(n+4){color:var(--cinza)}
.tons-faixas{display:grid;grid-template-columns:3fr 4fr 2fr;margin-top:12px;font-size:13px;letter-spacing:.04em;text-align:center}
.tons-faixas span{border-top:1px solid var(--linha);padding-top:8px;color:var(--cinza)}
.tons-faixas span:first-child{border-top-color:var(--preto);color:var(--preto)}
.dc-fecha{margin-top:clamp(40px,5vw,80px)}
.dc-fecha figure{position:relative;height:min(64vh,42vw);min-height:240px;overflow:hidden;background:#a6b18e}
.dc-fecha img,.dc-fecha video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* faixa com vídeo: a foto fica por baixo e o vídeo entra em fade quando começa a tocar (site.js) */
.filme video{opacity:0;transition:opacity 1.4s ease;pointer-events:none}
.filme.vivo video{opacity:1}
.filme .hero-p{bottom:18px}
.dc-fecha .ed-fecha{padding-top:clamp(36px,4.4vw,60px)}
@media (max-width:860px){
  .dc-abre{grid-template-columns:1fr;min-height:0}
  .dc-abre figure{order:-1;min-height:0;aspect-ratio:4/5}
  .dc-txt{padding:34px var(--gut) 44px}
  .dc-txt p{max-width:none}
  .dc-abre + .ed-cap{padding-top:44px}
  .tons-barra{height:110px}
  .tons-letras{font-size:17px}
  .tons-faixas{font-size:12px;letter-spacing:0}
  .dc-cor .tons{margin-bottom:26px}
  .dc-fecha figure{height:auto;min-height:0;aspect-ratio:3/2}
}

/* Stills de produto: a joia real sobre fundo de estúdio nas cores da campanha (bege, verde e escuro) */
.ed-cap figure.still img{aspect-ratio:4/3;object-fit:cover;transform:none}
.dq-foto.still img{object-fit:cover;mix-blend-mode:normal}
html.js .dq-foto.still.cortina img{transform:scale(1.04)}
html.js .dq-foto.still.cortina.in img,.dq-foto.still img{transform:none}
.palco img.still{object-fit:cover}
@media (max-width:860px){
  .ed-cap figure.still img{width:100%}
  .ed-cap figure.still{margin-bottom:22px}
}

/* ============ Home passada a limpo (13/10/2026) ============ */
/* Abertura: modelo à direita, chamada embaixo à esquerda */
.hero img,.hero video{object-position:45% 30%}
.hero::after{background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,transparent 22%,transparent 62%,rgba(0,0,0,.46) 100%)}
/* o header transparente leva a própria sombra, para o menu e o logo continuarem legíveis quando a foto rola por baixo */
header.site.sobre{background:linear-gradient(180deg,rgba(0,0,0,.46),rgba(0,0,0,0)) no-repeat}
@media (min-width:861px){
  .hero .fala{left:max(var(--gut),calc((100vw - 1400px) / 2 + var(--gut)));right:auto;width:min(40vw,640px);padding-inline:0;text-align:left;bottom:clamp(56px,12vh,130px)}
  .hero h1{font-size:clamp(24px,2.2vw,34px);line-height:1.15;letter-spacing:.01em}
  .hero .lk{margin-top:22px}
}
@media (min-width:861px) and (max-width:1100px){
  .hero .fala{width:29vw}                                  /* tela média: a chamada quebra em duas linhas e não encosta na mão */
}
@media (max-width:860px){
  /* celular: a foto inteira em cima (4:5) e a chamada numa faixa preta embaixo, sem cobrir a joia */
  .hero{aspect-ratio:auto;height:auto}
  .hero::before{content:"";display:block;aspect-ratio:4/5}
  .hero::after{display:none}
  .hero img,.hero video{inset:0 0 auto 0;height:auto;aspect-ratio:4/5;object-position:73% 50%}
  .hero .fala{position:static;padding:24px 20px 30px;text-align:left}
  .hero h1{font-size:26px;max-width:none}
  .hero .lk{margin-top:14px}
}

/* Categorias: quatro fotos, cada uma com a joia daquele tipo em uso */
.h-cat{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--fio);padding:var(--fio) var(--fio) 0;--fio:clamp(8px,1.1vw,18px)}
.h-cat a{display:block;text-align:center}
.h-cat figure{aspect-ratio:4/5;overflow:hidden;background:var(--nevoa)}
.h-cat img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity 1.8s ease var(--d,0s),transform 2.6s cubic-bezier(.2,.7,.2,1) var(--d,0s),scale 1.4s cubic-bezier(.2,.7,.2,1)}
.h-cat a:hover img{scale:1.04}
.h-cat span{display:block;padding:16px 4px 4px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.h-cat a:hover span{opacity:.6}
.h-cat + .bloco{padding-top:clamp(56px,7vw,104px)}

/* Dia e noite: a mesma modelo nas duas fotos, texto no meio */
.h-par{display:grid;grid-template-columns:1fr minmax(230px,.6fr) 1fr;align-items:center;gap:clamp(20px,3vw,56px);padding:clamp(48px,6vw,96px) clamp(8px,1.1vw,18px)}
.h-par figure{aspect-ratio:4/5;overflow:hidden;background:var(--nevoa)}
.h-par img{display:block;width:100%;height:100%;object-fit:cover}
.h-par-txt{text-align:center}
.h-par-txt h2{font-size:clamp(28px,2.7vw,42px);line-height:1.1}
.h-par-txt p{margin:16px auto 26px;max-width:22ch;color:#333}

/* Diamante cultivado: texto e as sete lapidações soltas */
.h-dc,.h-sala{display:grid;align-items:stretch}
.h-dc{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);border-top:1px solid var(--linha)}
.h-sala{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.h-dc figure,.h-sala figure{position:relative;overflow:hidden}
.h-dc figure{aspect-ratio:4/3;background:#a3ae8c}
.h-sala figure{min-height:min(80vh,54vw);background:var(--nevoa)}
.h-dc img,.h-sala img{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:cover}
.h-dc-txt,.h-sala-txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(40px,6vw,96px) clamp(24px,6vw,104px)}
.h-dc-txt h2,.h-sala-txt h2{font-size:clamp(28px,2.8vw,44px);line-height:1.1}
.h-dc-txt p,.h-sala-txt p{margin:18px 0 28px;max-width:34ch;color:#333}
.h-sala .ctas{display:flex;gap:12px;flex-wrap:wrap}

/* Hayah significa vida: faixa larga, a parede vazia da foto recebe o texto */
.h-vida{position:relative;overflow:hidden;background:#d9c9b4}
.h-vida picture{display:block;height:min(76vh,44vw);min-height:380px}
.h-vida img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 40%}
.h-vida-txt{position:absolute;top:0;bottom:0;left:clamp(24px,8vw,140px);width:min(40vw,500px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.h-vida-txt h2{font-size:clamp(30px,3.3vw,52px);line-height:1.06}
.h-vida-txt p{margin:16px 0 26px;max-width:28ch;color:#1f1f1f}

@media (max-width:860px){
  .h-cat{grid-template-columns:1fr 1fr;gap:8px;padding:8px 8px 0}
  .h-cat span{padding:12px 2px 14px;font-size:12px;letter-spacing:.12em}
  .h-cat + .bloco{padding-top:40px}
  .h-par{grid-template-columns:1fr 1fr;gap:8px;padding:8px 8px 0}
  .h-par-txt{order:3;grid-column:1 / -1;padding:30px var(--gut) 48px}
  .h-par-txt h2{font-size:26px}
  .h-par-txt p{margin:12px auto 20px;max-width:none}
  .h-dc,.h-sala{grid-template-columns:1fr}
  .h-dc figure{order:-1}
  .h-sala figure{min-height:0;aspect-ratio:1}
  .h-sala img{object-position:50% 40%}
  .h-dc-txt,.h-sala-txt{padding:30px var(--gut) 48px}
  .h-dc-txt h2,.h-sala-txt h2,.h-vida-txt h2{font-size:26px}
  .h-dc-txt p,.h-sala-txt p{margin:12px 0 22px;max-width:none}
  .h-sala .ctas{width:100%}
  .h-sala .ctas .btn{flex:1;padding-inline:12px}
  .h-vida{background:var(--branco)}
  .h-vida picture{height:auto;min-height:0;aspect-ratio:1}
  .h-vida img{object-position:50% 50%}
  .h-vida-txt{position:static;width:auto;align-items:center;text-align:center;padding:30px var(--gut) 48px}
  .h-vida-txt p{margin:12px auto 22px;max-width:30ch;color:#333}
}

/* ============ Página Joias: abas e seletores (13/10/2026) ============ */
/* Antes eram três linhas de palavras iguais (tipo, lapidação, preço). Agora o tipo é a única linha de abas;
   lapidação e preço são seletores com nome, na barra da contagem. */
.cab-col{padding-top:clamp(30px,3.4vw,48px)}
.filtros{padding-top:clamp(18px,2vw,26px)}
.chips.principais{gap:10px clamp(22px,3vw,44px)}
.chips.principais button{font-size:13.5px;padding-bottom:7px}
.barra-f{gap:8px clamp(16px,2.4vw,34px);margin-top:clamp(22px,2.6vw,32px);padding:12px 0}
.barra-f .filt{display:flex;align-items:center;gap:6px clamp(14px,2vw,28px);margin-left:auto}
.barra-f .ord select{max-width:100%;field-sizing:content}        /* onde o navegador permite, a caixa acompanha o texto escolhido */
.barra-f .ord select.ativo{box-shadow:0 1px 0 var(--preto)}
.limpa-f{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);padding:6px 0}
.limpa-f:hover{color:var(--preto)}
.limpa-f[hidden]{display:none}
@media (max-width:860px){
  /* celular: as abas rolam de lado numa linha só; os dois seletores ficam lado a lado, em caixas */
  .filtros{overflow:visible}
  .chips.principais{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;white-space:nowrap;width:auto;gap:0 22px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .chips.principais::-webkit-scrollbar{display:none}
  .chips.principais button{flex:none;font-size:13px}
  .barra-f{flex-wrap:wrap;border-top:0;padding:0;margin-top:18px}
  .barra-f .filt{order:-1;width:100%;margin:0 0 12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .barra-f .filt .ord select{width:100%;field-sizing:fixed;border:1px solid var(--linha);padding:11px 10px;font-size:15px}
  .barra-f .ord select.ativo{box-shadow:none;border-color:var(--preto)}
  .limpa-f{grid-column:1 / -1;justify-self:start;padding:2px 0 0}
  .barra-f .ordem{margin-left:auto}
}

/* ============ Ajustes da V2 (14/10/2026) ============ */
/* página da peça no celular: cinco miniaturas passavam da largura da tela */
@media (max-width:860px){
  .palco-col{min-width:0}
  .minis{gap:8px;padding:0 16px 20px;overflow-x:auto;scrollbar-width:none}
  .minis::-webkit-scrollbar{display:none}
  .mini{flex:none;width:56px;height:56px}
}
/* 404 */
.nao-achou{text-align:center;padding-block:clamp(80px,12vw,180px)}
.nao-achou h1{font-size:clamp(30px,3.4vw,50px);line-height:1.1;margin-top:14px}
.nao-achou > p:not(.cx){margin:16px auto 30px;max-width:40ch;color:#333}
.nao-achou .ctas{display:flex;justify-content:center;align-items:center;gap:26px;flex-wrap:wrap}

/* ============ V3 — celular primeiro (15/10/2026) ============ */
/* Revisão feita a partir de uma gravação de tela num iPhone. O celular é por onde a maioria acessa. */
:root{--cinza:#5C5C5C}

/* ---- Defeitos do Safari ----
   Caixa com proporção fixa e foto em posição absoluta, dentro de um grid: o Safari calcula largura zero e a foto some. */
.dq-foto,.h-dc figure,.h-sala figure,.dc-abre figure,.dc-fecha figure,.sala figure,.capa-col,.palco,.ed-capa{width:100%}
.painel .fecha:focus-visible{outline:none;text-decoration:underline;text-underline-offset:5px}

/* ---- Quadros de peça (listagem, home, "você também pode gostar") ----
   Fundo cinza bem claro e a joia ampliada por tipo (o tamanho do quadro não muda). */
.peca .ft{background:var(--nevoa)}
.peca .ft img{mix-blend-mode:multiply}
.peca h3{text-transform:none;letter-spacing:.01em;font-size:15px;line-height:1.35;margin-top:14px}
.peca .preco{font-size:15px;margin-top:4px}
.peca .preco.consulta{text-transform:none;letter-spacing:.01em;font-size:14px;color:var(--cinza)}
.peca .parc{font-size:13.5px}

/* Fotos de ambiente na grade da página Joias */
.peca-ed{position:relative;display:block;grid-column:span 2;grid-row:span 2;width:100%;overflow:hidden;background:var(--nevoa);color:#fff}
.peca-ed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale 1.4s cubic-bezier(.2,.7,.2,1)}
.peca-ed:hover img{scale:1.03}
.peca-ed::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.5));pointer-events:none}
.peca-ed span{position:absolute;z-index:1;left:20px;right:20px;bottom:18px;font-size:16px;line-height:1.3}
.peca-ed span small{display:block;margin-top:6px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.peca-ed[hidden]{display:none}
/* a foto de ambiente ocupa duas colunas: a grade preenche o buraco que sobraria antes dela */
.grade{grid-auto-flow:row dense}

/* Cabeçalho de seção: título à esquerda, link à direita (home) */
.cab-s{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.cab-s h2{text-align:left}

/* sacola e resumo: nome da peça em texto normal, como na listagem */
.item .nm{text-transform:none;letter-spacing:.01em;font-size:15.5px}

/* Lapidações: uma pedra solta por lapidação, em círculo */
.lap{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(12px,1.6vw,26px);margin-top:clamp(28px,3vw,44px)}
.lap a{display:block;text-align:center}
.lap .ft{aspect-ratio:1;border-radius:50%;overflow:hidden;background:#A9B38F}
.lap img{display:block;width:100%;height:100%;object-fit:cover;transition:scale 1.2s cubic-bezier(.2,.7,.2,1)}
.lap a:hover img{scale:1.06}
.lap span{display:block;margin-top:12px;font-size:14px;letter-spacing:.02em}

/* Página da peça: galeria de deslizar e barra fixa (só no celular) */
.deslize,.pontos,.barra-fixa{display:none}

/* Rodapé: as colunas abrem ao tocar no celular; no computador ficam sempre abertas (site.js) */
footer details summary{list-style:none;cursor:pointer}
footer details summary::-webkit-details-marker{display:none}
@media (min-width:861px){footer details summary::after{content:none}footer details summary{cursor:default}}
#pecas .vertudo{display:none}

@media (max-width:860px){
  /* grids de uma coluna sem estourar a tela (o Safari usa a largura mínima do conteúdo) */
  .ck-grade,.destaque,.h-dc,.h-sala,.dc-abre,.sala,.pdp,.showroom{grid-template-columns:minmax(0,1fr)}
  .ck-form,.ck-form fieldset,.compra{min-width:0}
  /* no Safari o fieldset em grid estica a coluna até o texto mais longo: coluna travada na largura da tela */
  .ck-form fieldset{grid-template-columns:minmax(0,1fr)}
  .ck-form .dupla{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ck-form input{min-width:0;width:100%}
  /* fotos entram direto ao rolar (a animação deixava caixas em branco) */
  html.js .cortina img,html.js .cortina.in img{opacity:1;transform:none;transition:none}

  /* tipografia: rótulos e texto miúdo maiores e mais escuros (nota 7 do cliente) */
  .cx,.btn,.lk,footer h4,.news button,details summary,.migalha{font-size:13px;letter-spacing:.12em}
  .aviso{font-size:13px;padding:8px 12px}
  .specs dt{font-size:12.5px}
  .chips.principais button{font-size:13.5px}
  .h-cat span{font-size:13px}

  /* ritmo: um espaçamento só entre blocos e texto alinhado à esquerda */
  .bloco{padding-block:56px}
  .centro,.h-par-txt,.h-vida-txt,.h-dc-txt,.h-sala-txt,.dq-txt,.manifesto-s,.manifesto-h,.cab-col{text-align:left}
  .h-vida-txt{align-items:flex-start}
  .h-par-txt p,.h-vida-txt p{margin-inline:0;max-width:none}
  .h-par-txt h2,.h-vida-txt h2,.h-dc-txt h2,.h-sala-txt h2,.dq-txt h2{font-size:28px;line-height:1.12}
  .h-par-txt p,.h-vida-txt p,.h-dc-txt p,.h-sala-txt p,.dq-txt .cinza{font-size:16.5px;line-height:1.55;color:#2B2B2B}

  /* abertura: a faixa da chamada na mesma cor do fundo da foto, mais baixa */
  .hero .fala{background:#1F211D;padding:20px var(--gut) 24px}
  .hero h1{font-size:25px;line-height:1.2}
  .hero .lk{margin-top:12px}

  /* quadros de peça: joia ampliada no celular */
  .peca .ft{aspect-ratio:1}
  .grade{gap:28px 10px}
  .peca h3{font-size:14.5px;margin-top:10px}

  /* "As mais pedidas" vira carrossel de deslizar */
  .trilho{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gut);scroll-padding-inline:var(--gut);margin-top:22px;scrollbar-width:none}
  .trilho::-webkit-scrollbar{display:none}
  .trilho .peca{flex:0 0 64vw;display:block}
  .trilho .peca:nth-child(n+7){display:block}
  #pecas .vertudo{display:none}

  /* lapidações: carrossel de círculos */
  .lap{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none}
  .lap::-webkit-scrollbar{display:none}
  .lap a{flex:0 0 30vw;scroll-snap-align:start}
  .lap span{font-size:13.5px;margin-top:10px}

  /* fotos de ambiente na grade: largura toda, uma linha */
  .peca-ed{grid-row:auto;aspect-ratio:auto}
  .peca-ed img{position:static;display:block;aspect-ratio:4/5;height:auto}

  /* serviços: texto maior e escuro */
  .servicos-f .wrap{gap:26px 18px}
  .servicos-f h3{font-size:13px}
  .servicos-f p{font-size:15px;color:#3A3A3A}

  /* cadastro e rodapé viram um bloco só */
  .news{padding-block:52px 8px}
  .news .wrap{text-align:left}
  .news form{margin-left:0}
  footer .topo{grid-template-columns:1fr;gap:0;padding-block:28px 22px;border-top:0}
  footer .topo > div:first-child{padding-bottom:22px}
  footer details{border-top:1px solid rgba(255,255,255,.2)}
  footer details:last-of-type{border-bottom:1px solid rgba(255,255,255,.2)}
  footer details summary{display:flex;justify-content:space-between;align-items:center;padding:17px 0}
  footer details summary h4{margin:0}
  footer details summary::after{content:"+";font-size:20px;line-height:1;color:#fff}
  footer details[open] summary::after{content:"−"}
  footer details ul{padding-bottom:18px;gap:12px;font-size:16px}
  footer .base{flex-direction:column;gap:8px}

  /* página da peça: fotos de deslizar, joia maior e barra de compra fixa */
  .pdp.tem-varias .palco,.pdp.tem-varias .minis{display:none}
  .deslize{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--nevoa)}
  .deslize::-webkit-scrollbar{display:none}
  .deslize figure{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1;position:relative;overflow:hidden}
  .deslize img{display:block;width:100%;height:100%}
  .deslize img.peca{object-fit:contain;mix-blend-mode:multiply;padding:18px;transform:scale(var(--z,1));transform-origin:var(--o,50% 50%)}
  .deslize img.still,.deslize img.modelo{object-fit:cover}
  .pontos{display:flex;justify-content:center;gap:8px;padding:12px 0 2px;background:var(--nevoa)}
  .pontos i{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.22);transition:background .25s}
  .pontos i.ativo{background:var(--preto)}
  .palco,.palco-col.so-uma .palco{height:auto;aspect-ratio:1}
  .palco img.peca,.palco img.peca:not([style]){padding:18px;--m:1}
  .barra-fixa{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:14px;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--linha);transform:translateY(110%);transition:transform .35s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .barra-fixa.visivel{transform:none}
  .barra-fixa .bf-t{flex:1;min-width:0;font-size:14px;line-height:1.3}
  .barra-fixa .bf-t b{display:block;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barra-fixa .bf-t span{color:var(--cinza)}
  .barra-fixa .btn{min-height:44px;padding:0 18px;flex:none}
  .junto .grade-pecas{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none}
  .junto .grade-pecas::-webkit-scrollbar{display:none}
  .junto .grade-pecas .peca{flex:0 0 64vw;scroll-snap-align:start}
  .junto h2{text-align:left}

  /* sacola: o total logo abaixo das peças, foto maior */
  .gaveta .itens{flex:0 1 auto}
  .gaveta footer{border-top:1px solid var(--linha)}
  .item .ft{width:96px}

  /* checkout: resumo do pedido recolhido numa faixa que abre ao tocar */
  .ck-ver{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 0;font-size:15.5px;color:var(--preto)}
  .ck-ver::after{content:"+";font-size:20px;margin-left:10px}
  .ck-resumo.aberto .ck-ver::after{content:"−"}
  .ck-ver b{font-weight:400;margin-left:auto}
  .ck-resumo{padding:0 18px}
  .ck-resumo:not(.aberto) > :not(.ck-ver){display:none}
  .ck-resumo.aberto{padding-bottom:20px}
  .ck-form label{font-size:14.5px}

  /* páginas editoriais (Diamante cultivado, Quem é a Hayah): foto de borda a borda e texto à esquerda */
  .ed-cap{text-align:left;gap:0;padding-block:0 36px}
  .ed-cap figure{margin-inline:calc(var(--gut) * -1)}
  .ed-cap figure img,.ed-cap figure.still img,.ed-cap figure.foto img{width:100%;margin:0}
  .ed-cap figure.still{margin-bottom:0}
  .ed-cap > div{padding-top:22px}
  .ed-cap h2{font-size:13px;color:var(--cinza)}
  .ed-cap p{font:400 19px/1.5 var(--texto);max-width:none;margin:12px 0 0;color:#2B2B2B}
  .manifesto-s p{font-size:20px;margin:0}
  .tons-letras{font-size:19px}
  .tons-faixas{font-size:13px}
  .ed-fecha,.sobre-fecha{text-align:left}
  .ed-fecha{padding:36px var(--gut) 64px}
  .sobre-fecha{padding-inline:var(--gut)}
  .sobre-fecha .ctas{justify-content:flex-start;flex-wrap:wrap;gap:18px 24px}

  /* menu do celular: categorias com foto no topo */
  .painel .pn-cat{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
  .painel .pn-cat a{border:0;padding:0;font:400 13px/1 var(--texto);letter-spacing:.12em;text-transform:uppercase}
  .painel .pn-cat img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:8px;background:var(--nevoa)}
  .painel .pn-fim{display:flex;gap:22px;margin-top:20px}
  .painel .pn-fim a{border:0;padding:6px 0;font:400 13px/1 var(--texto);letter-spacing:.12em;text-transform:uppercase}
}
/* segunda gravação do iPhone (15/10): o toque deixava o seletor escuro; e a chamada da abertura entrava atrasada */
a,button,select,summary,label{-webkit-tap-highlight-color:transparent}
.barra-f .ord select{background-color:var(--branco)}
@media (max-width:860px){.hero h1,.hero .lk{animation:none}}
/* no computador o painel não aparece; o atalho do checkout também não */
@media (min-width:861px){.ck-ver{display:none}}

/* ============ V4 — home do celular com presença (15/10/2026) ============ */
.cat-t{display:none}
@media (max-width:860px){
  /* títulos na serifa do logo (Bodoni), grandes; o texto continua na letra fina */
  .home h2,.home .hero h1{font-family:var(--titulo);font-weight:400;font-optical-sizing:auto;font-variation-settings:normal;letter-spacing:-.005em}
  .home h2{font-size:32px;line-height:1.08}
  .home .h-par-txt h2,.home .h-dc-txt h2,.home .h-sala-txt h2,.home .dq-txt h2,.home .news h2{font-size:34px}

  /* links: frase em texto normal com seta, não rótulo em caixa alta */
  .home .lk{text-transform:none;letter-spacing:.01em;font-size:16px;padding-bottom:3px}
  .home .lk::after{content:" →"}
  .home .cab-s{flex-wrap:wrap;row-gap:6px}
  .home .dq-txt .cx{display:none}

  /* abertura em tela cheia: o header fica transparente por cima e a frase vai sobre a foto */
  .home .hero{height:calc(100svh - 34px);min-height:560px;aspect-ratio:auto;margin-top:calc(var(--hh) * -1 - 1px)}
  .home .hero::before{display:none}
  .home .hero::after{display:block;background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,transparent 20%,transparent 52%,rgba(0,0,0,.66) 100%)}
  .home .hero img,.home .hero video{inset:0;height:100%;aspect-ratio:auto;object-fit:cover}
  .home .hero img{object-position:73% 30%}
  .home .hero video{object-position:50% 30%}
  .home .hero .fala{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(30px + env(safe-area-inset-bottom));background:none;padding:0;text-align:left}
  .home .hero h1{font-size:40px;line-height:1.02;max-width:8em}
  .home .hero .lk{margin-top:16px;color:#fff}
  .home .hero-p{top:auto;bottom:34px;right:var(--gut)}

  /* categorias: cartões altos com o nome sobre a foto, de deslizar */
  .home .cat-t{display:flex;padding-top:52px}
  .home .h-cat{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px var(--gut) 0;scroll-padding-inline:var(--gut);scrollbar-width:none}
  .home .h-cat::-webkit-scrollbar{display:none}
  .home .h-cat a{flex:0 0 72vw;position:relative;scroll-snap-align:start}
  .home .h-cat figure{aspect-ratio:4/5}
  .home .h-cat a::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.42));pointer-events:none}
  .home .h-cat span{position:absolute;z-index:1;left:16px;right:16px;bottom:14px;padding:0;color:#fff;font:400 27px/1.08 var(--titulo);font-optical-sizing:auto;letter-spacing:0;text-transform:none;text-align:left}
  .home .h-cat + .bloco{padding-top:56px}

  /* ritmo: espaço igual entre blocos */
  .home .bloco{padding-block:56px}

  /* destaque: foto quadrada de borda a borda */
  .home .dq-foto{aspect-ratio:1}
  .home .dq-txt{padding:24px var(--gut) 56px}
  .home .dq-txt h2{margin-top:0}

  /* dia e noite: o título vem antes das duas fotos */
  .home .h-par{padding:0 0 56px;gap:6px}
  .home .h-par-txt{order:-1;padding:56px var(--gut) 22px}
  .home .h-par figure{aspect-ratio:3/4}

  /* "Hayah significa vida": foto grande com a frase por cima */
  .home .h-vida{position:relative;background:#000;color:#fff}
  .home .h-vida picture{aspect-ratio:2/3}
  .home .h-vida img{object-fit:cover;object-position:60% 15%}
  .home .h-vida-txt{position:absolute;top:auto;left:0;right:0;bottom:0;width:auto;justify-content:flex-end;padding:120px var(--gut) 30px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72) 60%);text-align:left;align-items:flex-start}
  .home .h-vida-txt h2{font-size:40px;line-height:1.02}
  .home .h-vida-txt p{color:rgba(255,255,255,.9);margin:12px 0 18px}
  .home .h-vida-txt .lk{color:#fff}

  /* diamante cultivado e showroom: foto, depois o texto */
  .home .h-dc-txt,.home .h-sala-txt{padding:26px var(--gut) 56px}
  .home .h-sala figure{aspect-ratio:4/5}
}

/* ============ V4 — o estilo da home no site todo, celular (16/10/2026) ============ */
@media (max-width:860px){
  /* títulos: serifa do logo em todas as páginas */
  h1,h2,.ck-form legend,.gaveta header h2,.painel > a:not(.peq),footer details summary h4,
  .peca-ed span,.sobre-fecha p,.tres h3,.metodos h3,.guia h3{
    font-family:var(--titulo);font-weight:400;font-optical-sizing:auto;font-variation-settings:normal;letter-spacing:-.005em;text-transform:none
  }
  h1{font-size:36px;line-height:1.05}
  h2{font-size:30px;line-height:1.1}
  .compra h1{font-size:36px}
  .cab-col h1{font-size:40px}
  .dc-txt h1,.sobre-capa h1,.sala-txt h1{font-size:40px;line-height:1.02}
  .sobre-fecha p{font-size:38px}

  /* rótulos em caixa alta que viram títulos ou texto normal */
  .ed-cap h2,.manifesto-s h2{font-size:28px;line-height:1.1;color:var(--preto);margin-bottom:0;text-transform:none;letter-spacing:-.005em}
  .ed-cap p,.manifesto-s p{margin-top:10px}
  .manifesto-s p{font-size:18px;line-height:1.55}
  .sobre-capa p{text-transform:none;letter-spacing:.01em;font-size:16px}
  .tres h3,.metodos h3,.guia h3{font-size:22px;padding-bottom:10px}
  .ck-form legend{font-size:24px;padding-bottom:10px}
  .gaveta header h2{font-size:26px}
  .painel > a:not(.peq){font-size:28px;line-height:1.15}
  footer details summary h4{font-size:20px;color:#fff}
  .migalha{text-transform:none;letter-spacing:.01em;font-size:14px}
  .specs dt{text-transform:none;letter-spacing:.01em;font-size:14px}
  details summary{text-transform:none;letter-spacing:.01em;font-size:16px}
  .chips.principais button{text-transform:none;letter-spacing:.01em;font-size:16px}
  .form label{text-transform:none;letter-spacing:.01em;font-size:14px}
  .nao-achou .cx,.peca-ed span small{text-transform:none;letter-spacing:.01em;font-size:14px}
  .peca-ed span{font-size:24px;line-height:1.1}
  .valor .consulta,.peca .preco.consulta,.dq-preco.consulta{text-transform:none;letter-spacing:.01em;font-size:15px}

  /* links: frase em texto normal com seta (os botões continuam em caixa alta) */
  .lk{text-transform:none;letter-spacing:.01em;font-size:16px;padding-bottom:3px}
  .lk::after{content:" →"}
  .ck-topo .lk::after{content:none}
  .ck-topo .lk::before{content:"← "}

  /* títulos alinhados à esquerda */
  .cab-col,.ajuda,.junto h2,.guia,.nao-achou,.cab-pag{text-align:left}
  .ed-abre{text-align:left}
  .ed-abre p a{text-transform:none;letter-spacing:.01em;font-size:16px;margin-right:14px;border-bottom:1px solid currentColor}
  .cab-pag .tipos{justify-content:flex-start}
  .cab-pag .tipos a{text-transform:none;letter-spacing:.01em;font-size:16px}
  .ajuda .ctas,.nao-achou .ctas{justify-content:flex-start}
  .nao-achou > p:not(.cx){margin-left:0}
}