/* =====================================================================
   CarregaBR · comparar.css · /comparar/ (rodada consulta v2)
   Abertura com o motion de Lite e Ultra grande e limpo; a tabela continua
   (é a função da página): primeira coluna fixa, cabeçalho com os produtos em
   estúdio pequenos e nomes que ficam presos no topo no desktop, linhas finas,
   números em Jura. Base: momento.css e consulta.css.
   ===================================================================== */
.cmp-open{--cq-bg:#F2F0EB;padding-bottom:0}
.cmp-open h1{max-width:13ch}
/* abertura: a linha inteira em estúdio, na proporção de altura dos datasheets (--k) */
.cmp-line-wrap{--u:max(200px,min(380px,calc(14rem + 10vw),calc((100vw - 300px) / 2.9)));margin-top:clamp(32px,3vw,56px);padding-bottom:clamp(48px,4vw,88px)}
.cmp-line{list-style:none;margin:0 auto;padding:0;display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,2.2vw,36px);border-bottom:1px solid rgba(36,34,31,.22)}
.cmp-line li{flex:none;mix-blend-mode:multiply}
.cmp-line a{display:grid;justify-items:center;text-align:center;gap:4px;padding-bottom:14px;color:var(--text-primary);text-decoration:none;border-radius:14px}
.cmp-line__img{display:block;height:calc(var(--u) * var(--k));aspect-ratio:.66;overflow:hidden;
  /* o fundo do estúdio é a cor da página (#F2F0EB) no centro; só as bordas, mais escuras, se dissolvem, longe do produto */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 93%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 93%,transparent);mask-composite:intersect}
.cmp-line li:last-child .cmp-line__img{aspect-ratio:.74}
.cmp-line__img img{width:100%;height:100%;object-fit:cover;filter:brightness(1.12) contrast(1.05);transform:scale(1.02);transform-origin:50% 58%;transition:transform 1.1s var(--mo-ease)}
.cmp-line__img--white{aspect-ratio:.8;-webkit-mask-image:none;mask-image:none;background:#FFFFFF}
.cmp-line__img--white img{object-fit:contain;transform:none;mix-blend-mode:multiply}
.cmp-line a:hover .cmp-line__img img{transform:scale(1.07)}
.cmp-line a:hover .cmp-line__img--white img{transform:scale(1.05)}
.cmp-line b{font:700 clamp(1rem,.9rem + .4vw,1.25rem)/1.15 var(--display);letter-spacing:-.02em;margin-top:6px}
.cmp-line small{font:600 .9375rem/1.2 var(--mono);letter-spacing:.04em;color:var(--accent-text)}
.cmp-line a:focus-visible{outline:3px solid var(--accent-text);outline-offset:4px}
.cmp-line__note{margin:var(--s-5) auto 0;max-width:62ch;text-align:center;font-size:.9375rem;line-height:1.55;color:var(--text-secondary)}
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .cmp-line li{animation:cmpRise 1.1s var(--mo-ease) both;animation-delay:calc(var(--i,0) * 90ms + 150ms)}
  .cmp-line li:nth-child(2){--i:1}.cmp-line li:nth-child(3){--i:2}.cmp-line li:nth-child(4){--i:3}.cmp-line li:nth-child(5){--i:4}
}
@keyframes cmpRise{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:860px){
  .cmp-line-wrap{--u:270px;padding-inline:0}
  ul.cmp-line{justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .cmp-line::-webkit-scrollbar{display:none}
  .cmp-line__note{padding-inline:var(--gl) var(--gr)}
}

/* faixa escura Lite ou Ultra, depois da tabela: as duas estações reais lado a lado */
.cmp-lu__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:var(--s-7) var(--s-8);align-items:center}
.cmp-lu__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px)}
.cmp-lu__fig{margin:0;display:grid;gap:14px}
.cmp-lu__fig img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px;background:#F2F0EB}
.cmp-lu__fig figcaption{display:grid;gap:4px;font:600 .9375rem/1.3 var(--mono);letter-spacing:.04em;color:#E8A87C}
.cmp-lu__fig figcaption b{font:700 clamp(1.15rem,1rem + .4vw,1.4rem)/1.15 var(--display);letter-spacing:-.02em;color:#F6F1EA}
@media (max-width:900px){.cmp-lu__in{grid-template-columns:1fr}}
/* HUB na linha: recorte no armário, para a altura ficar na proporção */
.cmp-line li:last-child .cmp-line__img--hub{aspect-ratio:1.06}
.cmp-line__img--hub{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent)}
.cmp-line__img--hub img{object-position:44% 52%;transform:scale(1.22);transform-origin:44% 54%}
.cmp-line a:hover .cmp-line__img--hub img{transform:scale(1.26)}
.cmp-pic--hub{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 93%,transparent)}
.cmp-pic--hub img{transform:scale(1.02);transform-origin:50% 60%}
.cmp-faq-src{margin-top:var(--s-6)}

/* ---------- a tabela ---------- */
.cmp-sec{--canvas:#F2F1ED;background:#F2F1ED;padding-block:clamp(48px,3vw,72px) var(--mo-pad);border-top:1px solid rgba(36,34,31,.08)}
.cmp-sec .cq-head{margin-bottom:clamp(40px,4vw,72px)}
main .cmp-table{border-top:0;scroll-padding-left:13rem}
main .cmp-table table{min-width:1040px;table-layout:fixed;border-collapse:separate;border-spacing:0}
main .cmp-table th,main .cmp-table td{padding:18px 20px 18px 0;font-size:1rem;line-height:1.45;border-bottom:1px solid rgba(36,34,31,.1);color:var(--text-primary)}
main .cmp-table thead th:first-child,main .cmp-table tbody th,main .cmp-table .cmp-pics td:first-child{width:13rem}
/* fotos em estúdio, pequenas */
main .cmp-table .cmp-pics td{border:0;padding:0 20px 0 0;vertical-align:bottom}
main .cmp-table .cmp-pics td:first-child{position:sticky;left:0;z-index:2;background:var(--canvas)}
.cmp-pic{display:block;width:100%;max-width:190px;aspect-ratio:4/3;overflow:hidden;mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 93%,transparent);mask-composite:intersect}
.cmp-pic img{width:100%;height:100%;object-fit:cover;filter:brightness(1.12) contrast(1.05);transform:scale(1.08);transform-origin:50% 56%}
.cmp-pic--white{-webkit-mask-image:none;mask-image:none;background:#F2F1ED;mix-blend-mode:normal}
.cmp-pic--white img{object-fit:contain;transform:scale(1.12);transform-origin:50% 60%;mix-blend-mode:multiply}
/* nomes: presos no topo no desktop, com a faixa de potência em Jura */
main .cmp-table .cmp-names th{vertical-align:bottom;padding-top:6px;padding-bottom:20px;font:700 clamp(1.1rem,.95rem + .45vw,1.35rem)/1.15 var(--display);letter-spacing:-.02em;border-bottom:1px solid rgba(36,34,31,.32);background:var(--canvas)}
main .cmp-table .cmp-names th small{display:block;margin-top:6px;font:600 .9375rem/1.25 var(--mono);letter-spacing:.04em;text-transform:none;color:var(--text-secondary)}
main .cmp-table .cmp-names th em{display:block;margin-top:4px;font:600 .9375rem/1.25 var(--mono);font-style:normal;letter-spacing:.04em;color:var(--accent-text)}
/* linhas */
main .cmp-table tbody th{font:600 .9375rem/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--text-secondary)}
main .cmp-table tbody tr:hover td{background:rgba(36,34,31,.03)}
main .cmp-table .is-group th{padding:48px 0 14px;font:600 .9375rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);border-bottom:1px solid rgba(36,34,31,.18)}
main .cmp-table tbody tr.is-group:first-child th{padding-top:28px}
main .cmp-table .cmp-n td{font:600 1.0625rem/1.4 var(--mono);letter-spacing:.01em}
main .cmp-table .cmp-go th,main .cmp-table .cmp-go td{border-bottom:0;padding-top:22px;vertical-align:middle}
main .cmp-table .cmp-go .mo-link{min-height:44px;color:var(--text-primary)}
main .cmp-table .cmp-go .mo-link .icon{color:var(--accent-text)}
main .cmp-table th:first-child{box-shadow:none}
main .cmp-table.is-scrollable th:first-child,main .cmp-table.is-scrollable .cmp-pics td:first-child{box-shadow:1px 0 0 rgba(36,34,31,.12)}
main .cmp-table .is-group th:first-child{box-shadow:none}
@media (min-width:1100px){
  main .cmp-table{overflow:visible}
  main .cmp-table .cmp-names th{position:sticky;top:var(--nav-h);z-index:3}
}
@media (max-width:1099px){
  main .cmp-table .cmp-names th:first-child{z-index:3}
}
@media (max-width:640px){
  main .cmp-table table{min-width:980px}
  main .cmp-table thead th:first-child,main .cmp-table tbody th,main .cmp-table .cmp-pics td:first-child{width:7.5rem;min-width:7.5rem;max-width:7.5rem}
  main .cmp-table tbody th{font-size:.9375rem;padding-left:0}
  main .cmp-table th,main .cmp-table td{padding:14px 14px 14px 0;font-size:.9375rem}
  main .cmp-table .cmp-n td{font-size:1rem}
  main .cmp-table td{min-width:0}
  .cmp-pic{max-width:150px}
}
.cmp-after{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:var(--s-5) var(--s-8);margin-top:clamp(48px,4vw,80px);align-items:start}
.cmp-intro{margin:0;font-size:1.0625rem;line-height:1.65;color:var(--text-secondary);max-width:68ch}
main .cmp-after .spec-sheet__src{margin:0}
@media (max-width:860px){.cmp-after{grid-template-columns:1fr}}

/* coluna em destaque (mouse, foco ou escolha na abertura) */
main .cmp-table .is-hl{background:#FFFFFF}
main .cmp-table .cmp-pics td.is-hl,main .cmp-table .cmp-names th.is-hl{background:#FFFFFF}
main .cmp-table td,main .cmp-table th{transition:background-color .25s}
/* fixar coluna ao lado da primeira (só quando a tabela rola de lado) */
.cmp-pin{display:none}
@media (max-width:1099px){
  .cmp-pin{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;padding:0 14px;border:1px solid rgba(36,34,31,.28);border-radius:999px;background:transparent;font:600 .9375rem/1 var(--body);color:var(--text-primary);cursor:pointer}
  .cmp-pin[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#F6F1EA}
  main .cmp-table .is-pin{position:sticky;left:13rem;z-index:2;background:#FFFFFF;box-shadow:1px 0 0 rgba(36,34,31,.16)}
}
@media (max-width:640px){main .cmp-table .is-pin{left:7.5rem}}