/* Estilo de reposicao_info.
 *
 * NASCEU DE DENTRO DO HTML. Eram 17 KB dentro de um <style> no
 * template -- peso que viajava de novo a cada abertura da página, por
 * cada visitante e por cada robô de busca, e que o navegador não tinha
 * como guardar: estilo dentro do HTML não tem endereço para cachear.
 *
 * Aqui tem. Baixado uma vez e guardado por um ano; o endereço leva a
 * impressão digital do conteúdo, então mudar o arquivo muda o endereço e
 * o navegador busca a versão nova sozinho.
 */

.peca-page {
    --ls-blue: #0758c9;
    --ls-navy: #082a5e;
    --ls-green: #14804a;
    --ls-text: #172033;
    --ls-muted: #667085;
    --ls-line: #dfe7f2;
    background:
        radial-gradient(circle at 8% 2%, rgba(7, 88, 201, .12), transparent 30rem),
        radial-gradient(circle at 94% 17%, rgba(229, 38, 43, .08), transparent 25rem),
        #f4f7fb;
    color: var(--ls-text);
    min-height: 72vh;
    padding: 24px 18px 72px;
}

.peca-page, .peca-page * { box-sizing: border-box; }
.peca-wrap { margin: 0 auto; max-width: none; width: 100%; }
.peca-breadcrumb {
    align-items: center;
    color: #697586;
    display: flex;
    flex-wrap: wrap;
    font-size: .88rem;
    gap: 9px;
    margin-bottom: 20px;
}
.peca-breadcrumb a { color: var(--ls-blue); font-weight: 750; text-decoration: none; }
.peca-breadcrumb a:hover { text-decoration: underline; }
.peca-breadcrumb span { color: #a5afbd; }
.peca-breadcrumb strong {
    color: #344054;
    max-width: min(52vw, 440px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.peca-shell {
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(213, 224, 239, .95);
    border-radius: 30px;
    box-shadow: 0 24px 70px rgba(16, 43, 77, .14);
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(420px, 1.04fr);
    overflow: hidden;
}
.peca-visual {
    background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(232,241,255,.86)),
        repeating-linear-gradient(135deg, transparent 0 22px, rgba(7,88,201,.025) 22px 44px);
    border-right: 1px solid var(--ls-line);
    min-width: 0;
    padding: 30px;
    position: relative;
}
.peca-selo {
    align-items: center;
    backdrop-filter: blur(8px);
    background: rgba(236, 253, 245, .94);
    border: 1px solid #a6e8c8;
    border-radius: 999px;
    color: #087443;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 850;
    gap: 8px;
    left: 44px;
    letter-spacing: .03em;
    padding: 9px 13px;
    position: absolute;
    text-transform: uppercase;
    top: 44px;
    z-index: 4;
}
.peca-selo::before {
    background: #18a760;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(24, 167, 96, .14);
    content: "";
    height: 8px;
    width: 8px;
}
.peca-imagem {
    align-items: center;
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid #e1e9f4;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 18px;
    position: relative;
}
.peca-imagem > img {
    display: block;
    height: 100%;
    object-fit: contain;
    transition: transform .35s ease;
    width: 100%;
}
.peca-imagem:hover > img { transform: scale(1.025); }
.peca-sem-imagem { color: #98a2b3; font-weight: 700; text-align: center; }
.peca-sem-imagem i { display: block; font-size: 3rem; margin-bottom: 10px; }
.peca-galeria-nav {
    display: flex;
    inset: 50% 12px auto;
    justify-content: space-between;
    pointer-events: none;
    position: absolute;
    transform: translateY(-50%);
    z-index: 3;
}
.peca-galeria-nav button {
    align-items: center;
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, .9);
    border: 1px solid #d8e2ef;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(16, 43, 77, .14);
    color: var(--ls-navy);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.15rem;
    height: 42px;
    justify-content: center;
    pointer-events: auto;
    width: 42px;
}
.peca-contador {
    background: rgba(8, 42, 94, .84);
    border-radius: 999px;
    bottom: 14px;
    color: #fff;
    font-size: .76rem;
    font-weight: 800;
    padding: 6px 10px;
    position: absolute;
    right: 14px;
    z-index: 3;
}
.peca-miniaturas {
    display: grid;
    gap: 10px;
    grid-auto-columns: 78px;
    grid-auto-flow: column;
    margin-top: 12px;
    overflow-x: auto;
    padding: 2px 2px 7px;
    scrollbar-width: thin;
}
.peca-miniatura {
    aspect-ratio: 1;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    overflow: hidden;
    padding: 4px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.peca-miniatura:hover, .peca-miniatura.ativa {
    border-color: var(--ls-blue);
    box-shadow: 0 5px 15px rgba(7, 88, 201, .16);
    transform: translateY(-1px);
}
.peca-miniatura img { height: 100%; object-fit: cover; width: 100%; }
.peca-beneficios {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 18px;
}
.peca-beneficio {
    align-items: center;
    background: rgba(255,255,255,.82);
    border: 1px solid #dce6f2;
    border-radius: 14px;
    color: #42526a;
    display: flex;
    font-size: .75rem;
    font-weight: 750;
    gap: 7px;
    justify-content: center;
    min-height: 50px;
    padding: 8px;
    text-align: center;
}
.peca-beneficio i { color: var(--ls-blue); }
.peca-info { min-width: 0; padding: 42px 44px 40px; scroll-margin-top: 92px; }
.peca-eyebrow {
    color: var(--ls-blue);
    font-size: .77rem;
    font-weight: 900;
    letter-spacing: .12em;
    margin: 0 0 9px;
    text-transform: uppercase;
}
.peca-info h1 {
    color: #101828;
    font-size: clamp(1.85rem, 3vw, 2.65rem);
    letter-spacing: -.035em;
    line-height: 1.08;
    margin: 0;
}
.peca-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.peca-chip {
    background: #f0f5fb;
    border: 1px solid #d8e3f0;
    border-radius: 999px;
    color: #46566d;
    font-size: .77rem;
    font-weight: 750;
    padding: 7px 10px;
}
.peca-preco-box {
    background: linear-gradient(145deg, #f8fbff, #edf4ff);
    border: 1px solid #cfddf2;
    border-radius: 20px;
    margin-top: 24px;
    padding: 20px;
}
.peca-preco-label {
    color: #546178;
    display: block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.peca-preco {
    color: var(--ls-navy);
    display: block;
    font-size: clamp(2rem, 4vw, 2.7rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.05;
    margin-top: 4px;
}
.peca-preco-nota { color: #697586; display: block; font-size: .84rem; margin-top: 8px; }
.peca-secao { border-top: 1px solid #e7edf5; margin-top: 24px; padding-top: 22px; }
.peca-secao h2 {
    color: #26354b;
    font-size: .9rem;
    font-weight: 850;
    letter-spacing: .04em;
    margin: 0 0 10px;
    text-transform: uppercase;
}
.peca-descricao { color: #526074; font-size: .98rem; line-height: 1.72; margin: 0; }
.peca-detalhes { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.peca-detalhe {
    background: #f7f9fc;
    border: 1px solid #e4eaf2;
    border-radius: 13px;
    padding: 13px 14px;
}
.peca-detalhe span { color: #7a8699; display: block; font-size: .73rem; font-weight: 750; }
.peca-detalhe strong { color: #24354d; display: block; font-size: .9rem; margin-top: 3px; }
.peca-compra { border-top: 1px solid #e7edf5; margin-top: 24px; padding-top: 22px; }
.peca-quantidade-linha { align-items: center; display: flex; justify-content: space-between; margin-bottom: 14px; }
.peca-quantidade-linha label { color: #344054; font-size: .86rem; font-weight: 800; }
.peca-quantidade { align-items: center; border: 1px solid #d5dfec; border-radius: 12px; display: inline-flex; overflow: hidden; }
.peca-quantidade button {
    background: #f7f9fc;
    border: 0;
    color: var(--ls-navy);
    cursor: pointer;
    font-size: 1.2rem;
    height: 42px;
    width: 42px;
}
.peca-quantidade input { border: 0; font-weight: 800; height: 42px; text-align: center; width: 56px; }
.peca-acoes { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.peca-favoritos { margin: 4px 0 14px; }
.peca-btn {
    align-items: center;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    font-size: .9rem;
    font-weight: 800;
    gap: 9px;
    justify-content: center;
    min-height: 50px;
    padding: 12px 16px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}
.peca-btn:hover { transform: translateY(-2px); }
.peca-btn.carrinho { background: linear-gradient(135deg, #0758c9, #06459d); color: #fff; }
.peca-btn.whatsapp { background: linear-gradient(135deg, #25d366, #159e48); color: #fff; }
.peca-btn.voltar { background: #f4f6f9; border: 1px solid #dce3ec; color: #405067; grid-column: 1 / -1; }

@media (max-width: 920px) {
    .peca-shell { grid-template-columns: 1fr; }
    .peca-visual { border-bottom: 1px solid var(--ls-line); border-right: 0; }
}
@media (max-width: 600px) {
    .peca-page { padding: 16px 10px 52px; }
    .peca-shell { border-radius: 22px; }
    .peca-visual, .peca-info { padding: 20px; }
    .peca-selo { left: 32px; top: 32px; }
    .peca-beneficios { grid-template-columns: 1fr; }
    .peca-beneficio { justify-content: flex-start; padding-inline: 14px; }
    .peca-detalhes, .peca-acoes { grid-template-columns: 1fr; }
    .peca-btn.voltar { grid-column: auto; }
}

/* Sistema visual do catálogo: fundo claro e painéis informativos coloridos. */
.peca-page {
    --ls-blue: #0878f9;
    --ls-navy: #004aad;
    --ls-red: #e63946;
    --ls-text: #102b4c;
    --ls-muted: #647d98;
    --ls-line: rgba(0, 74, 173, .14);
    background:
        radial-gradient(circle at 7% 5%, rgba(8, 120, 249, .10), transparent 25rem),
        radial-gradient(circle at 96% 16%, rgba(230, 57, 70, .07), transparent 23rem),
        linear-gradient(180deg, #fbfdff, #f2f7fc);
    isolation: isolate;
    overflow: hidden;
    position: relative;
}
.peca-page::before {
    background-image:
        linear-gradient(rgba(0,74,173,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,74,173,.025) 1px, transparent 1px);
    background-size: 42px 42px;
    content: "";
    inset: 0;
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
    pointer-events: none;
    position: absolute;
    z-index: 0;
}
.peca-wrap { position: relative; z-index: 1; }
.peca-breadcrumb { color: #67809a; }
.peca-breadcrumb a { color: var(--ls-navy); }
.peca-breadcrumb a:hover { color: var(--ls-red); }
.peca-breadcrumb span { color: #9bacc0; }
.peca-breadcrumb strong { color: #173653; }

.peca-shell {
    gap: 20px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.peca-shell::before { display: none; }
.peca-visual,
.peca-info {
    border: 1px solid rgba(100, 166, 239, .20);
    border-radius: 28px;
    color: #fff;
    box-shadow: 0 24px 55px rgba(9, 35, 68, .20);
}
.peca-visual {
    padding: 28px;
    background:
        radial-gradient(circle at 16% 8%, rgba(61,170,255,.34), transparent 20rem),
        radial-gradient(circle at 95% 92%, rgba(230,57,70,.22), transparent 17rem),
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(145deg, #0b2d5a, #06172c 74%);
    background-size: auto, auto, 32px 32px, 32px 32px, auto;
}
.peca-info {
    padding: 38px 40px;
    background:
        radial-gradient(circle at 100% 0, rgba(8,120,249,.28), transparent 21rem),
        radial-gradient(circle at 0 100%, rgba(230,57,70,.14), transparent 20rem),
        linear-gradient(145deg, #0b2342, #071426 75%);
}
.peca-imagem {
    border-color: rgba(126, 190, 255, .52);
    background: radial-gradient(circle at 50% 38%, #fbfdff 0%, #eaf4ff 58%, #d9e9fa 100%);
    box-shadow: 0 20px 45px rgba(0, 8, 24, .34), 0 0 0 6px rgba(85, 177, 255, .08);
}
.peca-galeria-nav button { border-color: rgba(255,255,255,.54); color: #fff; background: linear-gradient(145deg, #0878f9, #004aad); }
.peca-galeria-nav button:hover { background: linear-gradient(145deg, #ef4352, #b91e30); }
.peca-contador { border: 1px solid rgba(255,255,255,.18); background: rgba(5,20,39,.90); }
.peca-miniatura { border-color: rgba(119,184,255,.25); background: #eaf4ff; }
.peca-miniatura:hover,
.peca-miniatura.ativa { border-color: #4eb5ff; box-shadow: 0 0 0 2px rgba(22,135,255,.18), 0 9px 24px rgba(0,0,0,.32); }

.peca-beneficio {
    min-height: 64px;
    padding: 9px 10px;
    justify-content: flex-start;
    text-align: left;
    border-color: rgba(139,194,251,.20);
    color: #eaf4ff;
    background: rgba(255,255,255,.075);
}
.peca-beneficio i {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0878f9, #0058c7);
}
.peca-beneficio:nth-child(2) i { background: linear-gradient(135deg, #e63946, #b91e30); }
.peca-beneficio:nth-child(3) i { background: linear-gradient(135deg, #f2ad19, #d77b00); }
.peca-beneficio span,
.peca-beneficio strong,
.peca-beneficio small { display: block; }
.peca-beneficio strong { font-size: .7rem; line-height: 1.2; }
.peca-beneficio small { margin-top: 3px; color: #9fb5cc; font-size: .57rem; line-height: 1.3; }

.peca-eyebrow { color: #73c1ff; }
.peca-info h1 { color: #fff; text-shadow: 0 9px 30px rgba(8,120,249,.18); }
.peca-chip { border-color: rgba(80,166,255,.34); color: #b7ddff; background: rgba(8,120,249,.16); }
.peca-chip:nth-child(even) { border-color: rgba(239,86,100,.28); color: #ffc4ca; background: rgba(230,57,70,.11); }
.peca-preco-box {
    border-color: rgba(109,186,255,.42);
    color: #fff;
    background:
        radial-gradient(circle at 100% 0, rgba(87,199,255,.24), transparent 44%),
        linear-gradient(135deg, #0758c9, #0b356b);
    box-shadow: 0 15px 34px rgba(0,67,158,.23), inset 0 1px 0 rgba(255,255,255,.10);
}
.peca-preco-label,
.peca-preco-nota { color: #c9def3; }
.peca-preco { color: #fff; }
.peca-secao,
.peca-compra {
    margin-top: 14px;
    padding: 17px;
    border: 1px solid rgba(139,187,239,.16);
    border-radius: 17px;
    background: rgba(255,255,255,.055);
}
.peca-secao h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #75c6ff;
}
.peca-secao h2 > i {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0878f9, #0054bb);
    font-size: .7rem;
}
.peca-secao:nth-of-type(even) h2 > i { background: linear-gradient(135deg, #e63946, #b91e30); }
.peca-descricao { color: #d0ddec; }
.peca-detalhe {
    min-height: 76px;
    padding: 12px;
    border-color: rgba(103,179,255,.30);
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    background: linear-gradient(145deg, rgba(8,120,249,.24), rgba(8,120,249,.10));
}
.peca-detalhe:nth-child(2) { border-color: rgba(238,85,100,.28); background: linear-gradient(145deg, rgba(230,57,70,.22), rgba(230,57,70,.08)); }
.peca-detalhe:nth-child(3) { border-color: rgba(32,190,154,.28); background: linear-gradient(145deg, rgba(13,151,120,.22), rgba(13,151,120,.08)); }
.peca-detalhe:nth-child(4) { border-color: rgba(242,173,25,.28); background: linear-gradient(145deg, rgba(242,173,25,.20), rgba(242,173,25,.07)); }
.peca-detalhe > i {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255,255,255,.10);
}
.peca-detalhe span { color: #a8bdd4; }
.peca-detalhe strong { color: #fff; }
.peca-quantidade-linha label { color: #79d4ff; }
.peca-quantidade {
    border-color: rgba(117,211,255,.78);
    background: linear-gradient(135deg, #004aad, #0878f9);
    box-shadow: 0 10px 24px rgba(0,74,173,.30), inset 0 1px 0 rgba(255,255,255,.18);
}
.peca-quantidade button {
    color: #fff;
    background: linear-gradient(145deg, #0878f9, #004aad);
}
.peca-quantidade button:last-child {
    background: linear-gradient(145deg, #ef4352, #b91e30);
}
.peca-quantidade button:hover {
    color: #071426;
    background: linear-gradient(145deg, #ffe36b, #ffb703);
}
.peca-quantidade input {
    border-right: 1px solid rgba(255,255,255,.34);
    border-left: 1px solid rgba(255,255,255,.34);
    color: #071426;
    background: linear-gradient(180deg, #ffe36b, #ffc928);
    box-shadow: inset 0 2px 5px rgba(111,70,0,.12);
    outline: 0;
}
.peca-quantidade input:focus {
    background: #fff29a;
    box-shadow: inset 0 0 0 3px rgba(0,74,173,.22);
}
.peca-btn.carrinho { box-shadow: 0 12px 26px rgba(22,135,255,.24); }
.peca-btn.whatsapp { box-shadow: 0 12px 26px rgba(37,211,102,.19); }
.peca-btn.voltar { border-color: rgba(152,190,234,.27); color: #e8f2fc; background: rgba(255,255,255,.07); }

@media (max-width: 920px) {
    .peca-shell { gap: 15px; }
    .peca-visual { border-bottom: 1px solid rgba(100,166,239,.20); }
}
@media (max-width: 600px) {
    .peca-visual,
    .peca-info { border-radius: 21px; }
    .peca-info { padding: 25px 18px 22px; }
    .peca-beneficio { min-height: 58px; }
    .peca-beneficio i { flex-basis: 31px; width: 31px; height: 31px; }
    .peca-beneficio small { display: none; }
    .peca-secao,
    .peca-compra { padding: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .peca-imagem > img, .peca-miniatura, .peca-btn { transition: none; }
}