* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #FAF7F4; font-family: 'Work Sans', sans-serif; }
a { text-decoration: none; }
a:hover { opacity: 0.72; cursor: pointer; }
a:focus-visible { outline: 2px solid #D6271E; outline-offset: 3px; }
.prod-card:hover .prod-photo { transform: scale(1.02); }
.rel-card { transition: transform .24s ease; }
.rel-card:hover { transform: translateY(-3px); opacity: 1; }
.rel-card:hover img { transform: scale(1.03); }
.rel-card img { transition: transform .24s ease; }
@media (prefers-reduced-motion: no-preference) {
.page { animation: fadein .25s ease; }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
/* ============================================================
CAMADA RESPONSIVA
As páginas foram desenhadas com estilo inline em 1440px. Em vez de
reescrever as 52, esta camada intercepta os padrões recorrentes por
seletor de atributo. O !important existe porque estilo inline vence
classe — é a única forma de sobrepor sem editar arquivo por arquivo.
============================================================ */
/* ---- até 1180px: aperta as margens laterais ---- */
@media (max-width: 1180px) {
[style*="px 96px"] { padding-left: 56px !important; padding-right: 56px !important; }
}
/* ---- até 980px: colunas viram pilha; respiro vertical diminui ---- */
@media (max-width: 980px) {
[style*="px 96px"] { padding-left: 34px !important; padding-right: 34px !important; }
/* qualquer grade de duas ou mais colunas empilha... */
[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
/* ...menos as grades densas de catálogo, que ainda cabem em duas */
[style*="repeat(3, minmax"], [style*="repeat(4, minmax"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
/* cards com posição fixa na grade não podem exigir uma coluna que não existe mais */
[style*="grid-column:1"], [style*="grid-column:2"],
[style*="grid-row: 1 / span 2"], [style*="grid-row:1"], [style*="grid-row:2"] {
grid-column: auto !important; grid-row: auto !important;
}
/* respiro vertical das seções */
[style*="padding:130px 96px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
[style*="padding:120px 96px"] { padding-top: 60px !important; padding-bottom: 60px !important; }
[style*="padding:110px 96px"] { padding-top: 58px !important; padding-bottom: 58px !important; }
[style*="padding:96px 96px 96px 80px"],
[style*="padding:96px 80px 96px 96px"] { padding: 56px 34px !important; }
[style*="padding:64px 96px 36px 96px"] { padding-top: 52px !important; }
[style*="padding:56px 96px 72px 96px"] { padding-top: 44px !important; padding-bottom: 52px !important; }
[style*="padding:32px 96px 64px 96px"],
[style*="padding:32px 96px 72px 96px"] { padding-bottom: 48px !important; }
/* painéis e vitrines altas encolhem */
[style*="min-height:620px"] { min-height: 0 !important; }
[style*="min-height:560px"] { min-height: 340px !important; }
[style*="min-height:380px"] { min-height: 260px !important; }
[style*="height:520px"] { height: 340px !important; }
[style*="height:480px"] { height: 320px !important; }
[style*="height:340px"] { height: 240px !important; }
[style*="height:280px"] { height: 220px !important; }
[style*="height:240px"] { height: 200px !important; }
[style*="height:220px"] { height: 190px !important; }
[style*="height:210px"] { height: 180px !important; }
/* escala tipográfica */
[style*="font-size:76px"], [style*="font-size:72px"] { font-size: 46px !important; }
[style*="font-size:64px"] { font-size: 42px !important; }
[style*="font-size:52px"] { font-size: 36px !important; }
[style*="font-size:46px"], [style*="font-size:44px"] { font-size: 32px !important; }
[style*="font-size:42px"] { font-size: 31px !important; }
[style*="font-size:40px"] { font-size: 29px !important; }
[style*="font-size:34px"] { font-size: 26px !important; }
[style*="font-size:30px"] { font-size: 24px !important; }
[style*="font-size:27px"], [style*="font-size:26px"] { font-size: 22px !important; }
[style*="font-size:25px"] { font-size: 21px !important; }
}
/* ---- até 760px: barra de navegação reorganiza ---- */
@media (max-width: 760px) {
/* home: marca centralizada acima, links numa linha que quebra */
[style*="grid-template-columns:1fr auto 1fr"] {
display: flex !important; flex-wrap: wrap !important;
justify-content: center !important; gap: 16px 22px !important;
}
[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(2) {
order: -1 !important; flex-basis: 100% !important; justify-content: center !important;
}
[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(3) { justify-content: center !important; }
/* páginas internas: marca acima, links abaixo */
[style*="space-between; padding:26px 96px"] {
flex-direction: column !important; gap: 15px !important;
}
/* links da barra encostam mais em telas estreitas */
[style*="padding:26px 96px"] [style*="gap:40px"] { gap: 20px !important; flex-wrap: wrap !important; justify-content: center !important; }
/* números do hero e listas lado a lado ganham quebra */
[style*="gap:44px; margin-top:58px"] { gap: 24px !important; flex-wrap: wrap !important; }
[style*="gap:64px"] { gap: 34px !important; }
}
/* ---- até 560px: uma coluna em tudo, margens mínimas ---- */
@media (max-width: 560px) {
[style*="px 96px"] { padding-left: 20px !important; padding-right: 20px !important; }
[style*="repeat(3, minmax"], [style*="repeat(4, minmax"],
[style*="repeat(2, minmax"] { grid-template-columns: 1fr !important; }
[style*="padding:96px 96px 96px 80px"],
[style*="padding:96px 80px 96px 96px"] { padding: 48px 20px !important; }
[style*="padding:36px 40px 40px 40px"] { padding: 26px 22px 30px 22px !important; }
[style*="padding:30px 34px 34px 34px"] { padding: 24px 22px 28px 22px !important; }
/* cartões que eram foto-ao-lado-do-texto empilham */
[style*="width:44%"], [style*="width:38%"] { width: 100% !important; border-right: 0 !important; }
[style*="width:44%"] ~ *, [style*="width:38%"] ~ * { width: 100% !important; }
[style*="display:flex; background:#FFFFFF; border:1px solid #E3DBD3"] { flex-direction: column !important; }
[style*="font-size:76px"], [style*="font-size:72px"] { font-size: 38px !important; }
[style*="font-size:64px"] { font-size: 34px !important; }
}
/* ---- carrossel de parceiros: as setas saem do caminho em tela estreita ---- */
@media (max-width: 640px) {
[style*="gap:28px; width:100%; max-width:860px"] { gap: 14px !important; flex-wrap: wrap !important; }
[style*="gap:28px; width:100%; max-width:860px"] > [style*="width:46px; height:46px"] { display: none !important; }
[style*="padding:36px 50px"] { padding: 28px 26px !important; }
[style*="padding:84px 96px 60px 96px"] { padding-top: 56px !important; padding-bottom: 40px !important; }
}
/* ---- telas muito estreitas (≤360px): último aperto ---- */
@media (max-width: 360px) {
[style*="px 96px"] { padding-left: 16px !important; padding-right: 16px !important; }
[style*="gap:40px"] { gap: 16px !important; }
[style*="letter-spacing:0.44em"], [style*="letter-spacing:0.42em"] { letter-spacing: 0.3em !important; }
}
/* ---- vitrines fotográficas: a legenda sai de cima da foto ----
Os painéis de produto posicionam legenda e etiqueta em absoluto, contando
com a altura do desktop. Quando o painel encolhe, isso vira texto por cima
da imagem. Em tela estreita eles voltam ao fluxo, abaixo da foto. */
@media (max-width: 980px) {
[style*="justify-content:center"][style*="position:relative"] {
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 18px !important;
padding: 26px 22px !important;
height: auto !important;
min-height: 0 !important;
}
[style*="justify-content:center"][style*="position:relative"] > img {
align-self: center !important;
max-width: 100% !important;
max-height: 240px !important;
width: auto !important;
height: auto !important;
}
[style*="position:absolute; left:44px"], [style*="position:absolute; right:44px"],
[style*="position:absolute; left:36px"], [style*="position:absolute; right:36px"],
[style*="position:absolute; left:22px"], [style*="position:absolute; right:22px"],
[style*="position:absolute; left:0; right:0"] {
position: static !important;
}
/* fio de 1px decorativo no topo do painel escuro não vira bloco */
[style*="position:absolute; top:0; left:0; right:0; height:1px"] { display: none !important; }
}
/* conteúdo largo nunca empurra a página para os lados */
.page > div { max-width: 100vw; }
/* hero */
.hpalco{position:relative;background:#141110;overflow:hidden;isolation:isolate;min-height:clamp(620px,86vh,920px);--banda:252px}
.hbrilho{position:absolute;left:68%;top:44%;width:60%;aspect-ratio:1;transform:translate(-50%,-50%);
background:radial-gradient(circle,rgba(214,39,30,.20),rgba(214,39,30,.05) 42%,rgba(0,0,0,0) 68%);filter:blur(6px);z-index:0}
.hvin{position:absolute;inset:0;z-index:3;pointer-events:none;
background:radial-gradient(ellipse at 50% 42%,rgba(0,0,0,0) 40%,rgba(0,0,0,.58) 100%)}
.hbase{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:3;pointer-events:none;
background:linear-gradient(to top,rgba(10,8,7,.90) 0%,rgba(10,8,7,.55) 42%,rgba(10,8,7,0) 100%)}
.hveu{position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(97deg,rgba(12,10,9,.97) 0%,rgba(12,10,9,.92) 30%,rgba(12,10,9,.55) 46%,rgba(12,10,9,.06) 62%,rgba(12,10,9,0) 100%)}
.hsl{position:absolute;top:34px;right:56px;bottom:172px;left:49%;display:flex;align-items:center;justify-content:flex-end;
z-index:1;opacity:0;transition:opacity .85s cubic-bezier(.4,0,.2,1)}
.hsl.on{opacity:1}
.hsl img{max-width:100%;max-height:94%;object-fit:contain;
filter:drop-shadow(0 40px 60px rgba(0,0,0,.7)) drop-shadow(0 0 46px rgba(214,39,30,.13));
transform:scale(1);transition:transform 5.2s linear}
.hsl.on img{transform:scale(1.055)}
.hcopy{position:relative;z-index:5;padding:88px 96px;max-width:min(640px,45%);display:flex;flex-direction:column;gap:18px}
.holho{font-family:'Work Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#FF6B60}
.hcopy h1{font-family:'Source Serif 4',Georgia,serif;font-size:44px;line-height:1.08;font-weight:600;margin:0;color:#fff}
.hcopy p{font-family:'Work Sans',sans-serif;font-size:16.5px;line-height:1.6;color:#CDC3BA;margin:0;max-width:42ch}
.hcopy p strong{color:#fff;font-weight:600}
.hbtns{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}
.hb1{background:#D6271E;color:#fff;font-family:'Work Sans',sans-serif;font-size:14px;font-weight:600;padding:15px 30px}
.hb2{border:1px solid rgba(255,255,255,.45);color:#fff;font-family:'Work Sans',sans-serif;font-size:14px;font-weight:600;padding:15px 30px}
.hleg{position:absolute;z-index:4;right:64px;bottom:66px;display:flex;flex-direction:column;gap:5px;
align-items:flex-end;text-align:right;padding:0 15px 0 0;border-right:2px solid #D6271E}
.hleg .m{font-family:'Work Sans',sans-serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#A79C93}
.hleg .n{font-family:'Source Serif 4',Georgia,serif;font-size:32px;font-weight:600;color:#fff;line-height:1.1;display:block}
.hleg a.n:hover{opacity:.75}
.hleg .d{font-family:'Work Sans',sans-serif;font-size:13px;color:#C6BCB3;line-height:1.5;max-width:30ch}
.hleg .r{font-family:'Work Sans',sans-serif;font-size:11px;color:#8C817A;letter-spacing:.06em;font-variant-numeric:tabular-nums;margin-top:2px}
.hanim{animation:hsobe .85s cubic-bezier(.2,.7,.2,1) both}
@keyframes hsobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hticks{position:absolute;z-index:4;right:64px;bottom:38px;display:flex;gap:6px}
.htk{width:28px;height:3px;background:rgba(255,255,255,.20);position:relative;overflow:hidden;border-radius:2px;border:0;padding:0;cursor:pointer}
.htk i{position:absolute;inset:0;width:0;background:#D6271E;display:block}
.htk.on i{animation:hench 5.2s linear forwards}
@keyframes hench{from{width:0}to{width:100%}}
@media (max-width:1200px) and (min-width:861px){
.hpalco{min-height:560px}.hcopy{padding:56px 40px;max-width:46%}.hcopy h1{font-size:33px}
.hcopy p{max-width:34ch}
.hsl{top:24px;right:20px;bottom:150px;left:48%}.hsl img{max-width:100%;max-height:88%}
.hleg{right:24px;bottom:56px}.hleg .n{font-size:26px}.hleg .d{max-width:26ch}.hticks{right:24px}}
/* No celular a peça e o texto não podem dividir a mesma faixa: a foto ganha
uma banda própria no topo e o texto passa a correr abaixo dela. */
@media (max-width:860px){
.hpalco{min-height:0}
.hsl{top:14px;left:0;right:0;bottom:auto;height:var(--banda);justify-content:center;padding:0 18px}
.hcopy{max-width:none}
.hsl img{max-width:84%;max-height:100%;filter:drop-shadow(0 22px 34px rgba(0,0,0,.7)) drop-shadow(0 0 34px rgba(214,39,30,.13))}
.hsl.on img{transform:scale(1.045)}
.hbrilho{left:50%;top:calc(var(--banda)/2 + 14px);width:96%}
.hvin{height:calc(var(--banda) + 48px);background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 46%,rgba(0,0,0,.5) 100%)}
.hbase{display:none}
.hveu{background:linear-gradient(to bottom,rgba(12,10,9,0) 0%,rgba(12,10,9,.30) 56%,rgba(12,10,9,.92) 76%,rgba(12,10,9,.98) 100%)}
.hleg{position:static;margin:calc(var(--banda) + 22px) 22px 0;align-items:flex-start;text-align:left;
border-right:0;border-left:2px solid #D6271E;padding:0 0 0 13px}
.hleg .n{font-size:25px}.hleg .d{font-size:12.5px;max-width:34ch}
.hticks{position:static;margin:16px 22px 0;justify-content:flex-start}
.hcopy{padding:26px 22px 46px;max-width:none;gap:14px}
.hcopy h1{font-size:28px}.hcopy p{font-size:15px;max-width:none}
.holho{font-size:10.5px}
.hbtns{gap:10px}
.hb1,.hb2{padding:13px 18px;font-size:13px;flex:1 1 46%;text-align:center}}
@media (max-width:860px) and (min-width:620px){ .hpalco{--banda:360px} }
@media (max-width:619px) and (min-height:760px){ .hpalco{--banda:290px} }
@media (prefers-reduced-motion:reduce){
.hsl img,.hsl{transition:none}.hsl.on img{transform:none}.htk.on i{animation:none;width:100%}.hanim{animation:none}}
/* carrossel de fabricantes */
.fab-car{position:relative;margin-top:30px;display:flex;align-items:stretch;gap:12px}
.fab-trilho{flex:1;min-width:0;display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;
scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:2px}
.fab-trilho::-webkit-scrollbar{display:none}
.fab-card{flex:0 0 calc((100% - 48px)/4);scroll-snap-align:start;background:#FFFFFF;border:1px solid #E3DBD3;
padding:28px 22px 24px;display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;
color:inherit;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.fab-card:hover{transform:translateY(-4px);border-color:#C9BFB6;box-shadow:0 14px 30px rgba(34,30,27,.09);opacity:1}
.fab-nav{flex:0 0 42px;align-self:center;height:42px;border:1px solid #E3DBD3;background:#FFFFFF;color:#D6271E;
display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
transition:background .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease}
.fab-nav:hover{background:#D6271E;color:#FFFFFF;border-color:#D6271E;opacity:1}
.fab-nav[disabled]{opacity:.28;cursor:default;pointer-events:none}
.fab-pontos{display:flex;justify-content:center;gap:7px;margin-top:22px}
.fab-pontos i{width:26px;height:3px;background:#DED5CC;display:block;border-radius:2px;transition:background .25s ease}
.fab-pontos i.on{background:#D6271E}
@media (max-width:1180px){ .fab-card{flex:0 0 calc((100% - 32px)/3)} }
@media (max-width:900px){ .fab-card{flex:0 0 calc((100% - 16px)/2)} .fab-nav{flex-basis:36px;height:36px} }
@media (max-width:600px){ .fab-car{gap:8px} .fab-card{flex:0 0 100%;padding:24px 18px 20px} }
@media (prefers-reduced-motion:reduce){ .fab-trilho{scroll-behavior:auto} .fab-card{transition:none} }
/* contato */
.os-oculto{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0}
.os-acoes{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:4px}
.os-zap{display:inline-flex;align-items:center;gap:9px;font-family:'Work Sans',sans-serif;font-size:14px;
font-weight:600;color:#0F7A4E;border:1px solid #BFE0CE;background:#F1FAF4;padding:15px 26px;text-decoration:none;
transition:background .2s ease,border-color .2s ease,color .2s ease}
.os-zap:hover{background:#0F7A4E;border-color:#0F7A4E;color:#FFFFFF;opacity:1}
.os-zap-cheio{justify-content:center;padding:14px 20px;font-size:14.5px}
.os-aviso{font-family:'Work Sans',sans-serif;font-size:14px;line-height:1.55;padding:0;display:none}
.os-aviso.ok{display:block;color:#0F7A4E;background:#F1FAF4;border-left:3px solid #0F7A4E;padding:14px 16px}
.os-aviso.erro{display:block;color:#8C1B16;background:#FDF3F2;border-left:3px solid #D6271E;padding:14px 16px}
.os-aviso.indo{display:block;color:#6B625B}
/* busca */
/* ---------------- busca no cabecalho ---------------- */
.bsc{position:relative;font-family:'Work Sans',sans-serif}
.bsc-campo{display:flex;align-items:center;gap:8px;background:#FFFFFF;
border:1px solid #E3DBD3;border-radius:2px;padding:0 10px;height:36px;
width:240px;transition:width .18s ease,border-color .18s ease}
.bsc-campo:focus-within{width:322px;border-color:#221E1B}
.bsc-lupa{color:#8A8078;flex:0 0 15px}
.bsc-campo:focus-within .bsc-lupa{color:#D6271E}
.bsc-inp{border:0;outline:0;background:transparent;width:100%;min-width:0;
font-family:'Work Sans',sans-serif;font-size:13.5px;color:#221E1B;padding:0}
.bsc-inp::placeholder{color:#9A9088}
.bsc-x{border:0;background:transparent;color:#9A9088;font-size:17px;line-height:1;
cursor:pointer;padding:0 2px}
.bsc-x:hover{color:#221E1B}
.bsc-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:600;
width:430px;max-width:min(430px,92vw);max-height:min(62vh,520px);overflow-y:auto;
background:#FFFFFF;border:1px solid #E3DBD3;
box-shadow:0 18px 40px rgba(34,30,27,.14);text-align:left}
.bsc-cab{padding:11px 16px;border-bottom:1px solid #E3DBD3;background:#FAF7F4;
font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8A8078;
position:sticky;top:0}
.bsc-item{display:grid;grid-template-columns:48px 1fr;gap:13px;align-items:center;
padding:11px 16px;border-bottom:1px solid #F1EAE3;text-decoration:none;color:inherit}
.bsc-item:last-child{border-bottom:0}
.bsc-item:hover,.bsc-item.on{background:#F3EEE9}
.bsc-th{width:48px;height:48px;background:#F3EEE9;display:flex;align-items:center;
justify-content:center;overflow:hidden;flex:0 0 48px}
.bsc-th img{max-width:86%;max-height:86%;object-fit:contain;display:block}
.bsc-n{display:block;font-family:'Source Serif 4',Georgia,serif;font-size:14.5px;
font-weight:600;line-height:1.32;color:#221E1B}
.bsc-n mark{background:#FBE3E0;color:#221E1B;padding:0 1px}
.bsc-m{display:block;font-size:11.5px;color:#8A8078;margin-top:3px;letter-spacing:.01em;line-height:1.4}
.bsc-vazio{padding:20px 16px;font-size:13.5px;color:#6B625B;line-height:1.6}
.bsc-vazio b{color:#221E1B}
@media (max-width:760px){
.bsc{width:100%;max-width:340px}
.bsc-campo,.bsc-campo:focus-within{width:100%}
.bsc-pop{right:auto;left:0;width:min(430px,94vw)}
}
@media (prefers-reduced-motion:reduce){.bsc-campo{transition:none}}
.page{display:block !important}
/* ============================================================
SAFARI · max-height em PORCENTAGEM num ![]()
dentro de flex
------------------------------------------------------------
O WebKit ignora max-height em % quando o ![]()
é item de um flex
container. Bug antigo e ainda vivo no iOS. Efeito: a foto do produto
renderiza no tamanho natural, estoura a moldura e aparece cortada no
iPhone — no Chrome/Android fica certa. Reproduzido com a haste
I-TAPPER: 169x506 px de arquivo numa caixa de 320 px de altura.
Em PIXEL o WebKit respeita. É o mesmo remédio que já estava sendo
usado no painel fotográfico mais acima nesta folha (max-height:240px).
Os valores NÃO foram calculados no papel: foram MEDIDOS no navegador,
em 84 páginas do site, nas duas larguras. A conta tem que ser sobre a
altura ÚTIL da caixa, não sobre a declarada — com box-sizing:border-box
uma caixa de 168px que tem borda de 1px só oferece 167px ao conteúdo, e
arredondar isso desloca a imagem em 1px. Por isso os valores quebrados.
Resultado: em Chrome e Firefox a renderização não muda em nada.
============================================================ */
[style*="height:84px"] > img[style*="max-height:74%"] { max-height: 60.68px !important; } /* 74% de 82 px úteis */
[style*="height:150px"] > img[style*="max-height:100%"] { max-height: 150px !important; } /* 100% de 150 px úteis */
[style*="height:168px"] > img[style*="max-height:78%"] { max-height: 130.26px !important; } /* 78% de 167 px úteis */
[style*="height:180px"] > img[style*="max-height:74%"] { max-height: 132.46px !important; } /* 74% de 179 px úteis */
[style*="height:180px"] > img[style*="max-height:80%"] { max-height: 143.2px !important; } /* 80% de 179 px úteis */
[style*="height:190px"] > img[style*="max-height:76%"] { max-height: 143.64px !important; } /* 76% de 189 px úteis */
[style*="height:200px"] > img[style*="max-height:74%"] { max-height: 147.26px !important; } /* 74% de 199 px úteis */
[style*="height:210px"] > img[style*="max-height:74%"] { max-height: 154.66px !important; } /* 74% de 209 px úteis */
[style*="height:280px"] > img[style*="max-height:70%"] { max-height: 195.3px !important; } /* 70% de 279 px úteis */
[style*="height:340px"] > img[style*="max-height:62%"] { max-height: 210.18px !important; } /* 62% de 339 px úteis */
[style*="height:340px"] > img[style*="max-height:70%"] { max-height: 237.3px !important; } /* 70% de 339 px úteis */
[style*="height:480px"] > img[style*="max-height:86%"] { max-height: 412.8px !important; } /* 86% de 480 px úteis */
[style*="height:480px"] > img[style*="max-height:88%"] { max-height: 422.4px !important; } /* 88% de 480 px úteis */
[style*="height:520px"] > img[style*="max-height:80%"] { max-height: 414.4px !important; } /* 80% de 518 px úteis */
[style*="height:520px"] > img[style*="max-height:82%"] { max-height: 424.76px !important; } /* 82% de 518 px úteis */
/* as mesmas caixas depois que a camada responsiva encolhe a altura */
@media (max-width: 980px) {
[style*="height:210px"] > img[style*="max-height:74%"] { max-height: 132.46px !important; } /* 74% de 179 px úteis */
[style*="height:280px"] > img[style*="max-height:70%"] { max-height: 153.3px !important; } /* 70% de 219 px úteis */
[style*="height:340px"] > img[style*="max-height:62%"] { max-height: 148.18px !important; } /* 62% de 239 px úteis */
[style*="height:340px"] > img[style*="max-height:70%"] { max-height: 167.3px !important; } /* 70% de 239 px úteis */
[style*="height:480px"] > img[style*="max-height:86%"] { max-height: 275.2px !important; } /* 86% de 320 px úteis */
[style*="height:480px"] > img[style*="max-height:88%"] { max-height: 281.6px !important; } /* 88% de 320 px úteis */
[style*="height:520px"] > img[style*="max-height:80%"] { max-height: 270.4px !important; } /* 80% de 338 px úteis */
[style*="height:520px"] > img[style*="max-height:82%"] { max-height: 277.16px !important; } /* 82% de 338 px úteis */
/* Painéis de altura FLEXÍVEL (min-height, largura em %) ficaram de fora
de propósito. Testei e o bug não acontece neles: quando a altura do pai
é indefinida, a porcentagem é ignorada pelos DOIS motores, Chrome
incluído — não há divergência para corrigir, e pôr um teto em pixel ali
encolheria a imagem no Chrome. O bug só morde onde o pai tem altura
DEFINIDA, que é exatamente o conjunto das regras acima.
Os painéis escuros (position:relative) já têm teto próprio de 240px na
regra das vitrines fotográficas, mais acima nesta folha.
O hero da home (.hsl img, max-height em %) também é flex com altura
definida, mas as imagens de hero são deitadas (873x613, por exemplo) e
quem manda nelas é o max-width — por isso não estouram. */
}
/* ============================================================
GALERIA DE FOTOS DO PRODUTO (.pgal)
------------------------------------------------------------
A plasmafit-dual-mobility.html já vinha com a marcação desta
galeria — palco, setas, contador, legenda e tiras — mas o CSS e o
JS dela nunca existiram nesta folha nem no app.js. Sem regra
nenhuma, o navegador empilhava as 6 fotos em tamanho natural e elas
invadiam a coluna de texto, no desktop e no celular.
É a única página do site que usa o componente.
As imagens usam width/height 100% + object-fit:contain, com o recuo
no padding do palco — de propósito, para NÃO depender de max-height
em porcentagem, que é justamente o que o WebKit ignora dentro de
flex (ver o bloco do Safari acima).
============================================================ */
.pgal { display:flex; flex-direction:column; gap:14px; }
.pgal-palco { position:relative; height:480px; background:#F3EEE9; overflow:hidden; }
.pgal-sl { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
padding:34px; opacity:0; visibility:hidden; transition:opacity .28s ease; }
.pgal-sl.on { opacity:1; visibility:visible; }
.pgal-sl img { width:100%; height:100%; object-fit:contain; display:block; }
.pgal-nav { position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px;
border:1px solid #E3DBD3; background:rgba(250,247,244,.92); display:flex; align-items:center;
justify-content:center; cursor:pointer; padding:0; transition:background .18s, border-color .18s; }
.pgal-nav:hover { background:#FFFFFF; border-color:#C9BEB4; }
.pgal-nav:focus-visible { outline:2px solid #D6271E; outline-offset:2px; }
.pgal-ant { left:12px; }
.pgal-prox { right:12px; }
.pgal-conta { position:absolute; right:12px; bottom:12px; font-family:'Work Sans',sans-serif;
font-size:11.5px; font-weight:600; letter-spacing:.06em; color:#6B625B;
background:rgba(250,247,244,.92); border:1px solid #E3DBD3; padding:4px 9px; }
.pgal-legenda { font-family:'Work Sans',sans-serif; font-size:12.5px; line-height:1.5;
color:#8A8078; min-height:2.6em; }
.pgal-tiras { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:8px; }
.pgal-th { padding:5px; height:62px; background:#FFFFFF; border:1px solid #E3DBD3;
cursor:pointer; transition:border-color .18s; }
.pgal-th img { width:100%; height:100%; object-fit:contain; display:block; }
.pgal-th:hover { border-color:#C9BEB4; }
.pgal-th.on { border-color:#D6271E; }
.pgal-th:focus-visible { outline:2px solid #D6271E; outline-offset:2px; }
/* mesma proporção que a camada responsiva dá às caixas de foto de 480px */
@media (max-width: 980px) {
.pgal-palco { height:320px; }
.pgal-sl { padding:22px; }
.pgal-th { height:54px; }
}
@media (max-width: 560px) {
.pgal-tiras { grid-template-columns:repeat(3, minmax(0,1fr)); }
.pgal-th { height:64px; }
}
@media (prefers-reduced-motion: reduce) { .pgal-sl { transition:none; } }