/* ====== SIMULADOR 3D — mockup do copo com a arte do cliente ====== */
body.sim3d-open { overflow: hidden; }

.sim3d-backdrop {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(10, 37, 64, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: sim3d-fade 180ms ease-out;
}
@keyframes sim3d-fade { from { opacity: 0 } to { opacity: 1 } }

.sim3d-dialog {
    width: 100%; max-width: 1120px;
    height: min(92vh, 780px);
    background: var(--bg-surface-solid);
    border-radius: 18px;
    box-shadow: var(--shadow-window);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: sim3d-pop 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sim3d-pop { from { opacity: 0; transform: translateY(12px) scale(0.98) } to { opacity: 1; transform: none } }
.sim3d-dialog.is-dragging { user-select: none; }

/* ── Embutido na página: sem modal, o simulador é uma seção do produto ── */
.sim3d-inline { display: block; }
/* Altura automática: o embutido cresce com o painel. Travar a altura aqui era o
   que empurrava cor, tamanho da arte, arte plana e arco pra dentro de um scroll
   interno que ninguém via — quem rola a página nunca chegava neles. */
.sim3d-inline .sim3d-dialog {
    max-width: none;
    height: auto;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    animation: none;
}
/* No embutido o painel pode ser mais largo: sobra página, não falta. */
.sim3d-inline .sim3d-body { grid-template-columns: 1fr 340px; align-items: stretch; }
/* O PALCO estica com o painel; o VIEWPORT, não. A separação existe porque o
   painel passa de 2000px (20 cores + tinta + arte + encaixe + arco) e as duas
   soluções óbvias quebram: esticar o canvas junto deixa o copo perdido no meio
   de uma tela e meia de vazio, e deixar a coluna curta abre um buraco branco do
   tamanho do painel ao lado do 3D. Aqui a coluna fica preenchida do começo ao
   fim e o copo gruda no topo enquanto o cliente rola os controles. */
/* Sem `overflow: hidden` aqui: ele criaria um contexto de rolagem e o sticky de
   dentro morreria (gruda no palco, que não rola). Quem recorta o canvas é o
   próprio viewport, que já tem overflow escondido. */
.sim3d-inline .sim3d-stage {
    margin: 14px 0 14px 14px;
    border-radius: 12px;
    background: linear-gradient(160deg, #f4f0ea 0%, #e8e2da 100%);
}
.sim3d-inline .sim3d-viewport {
    height: clamp(420px, 62vh, 620px);
    background: none;
    border-radius: 12px;
}
/* Acompanha a rolagem do painel: escolher cor sem ver o copo não serve. O
   sticky é do bloco inteiro (copo + outros lados), não só do viewport — senão a
   fila de miniaturas ficava pra trás na primeira rolagem. */
.sim3d-inline .sim3d-sticky { position: sticky; top: 16px; }
/* `position: sticky` morre dentro de ancestral com overflow recortado — e aqui
   não custa nada: o corpo fica entre cabeçalho e rodapé, longe dos cantos. */
.sim3d-inline .sim3d-dialog { overflow: visible; }
.sim3d-inline .sim3d-panel { overflow: visible; }

/* Alinha com as colunas do produto. O width:100% é obrigatório: body.shop é
   flex column, e a margem auto tira o stretch — sem ele a seção encolhe pro
   tamanho do conteúdo. */
.sim3d-section {
    width: 100%;
    max-width: var(--shop-max, 1440px);
    /* 16px embaixo, não 32: a seção perdeu o título e o subtítulo, e a folga
       de antes existia para separar dois blocos com cabeçalho. Hoje ela só
       empurrava as sugestões para longe da peça. */
    margin: 0 auto 16px;
    padding: 0 var(--shop-gutter, 24px);
    box-sizing: border-box;
}
.sim3d-section > h2 {
    font-size: 20px; font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    text-align: center;
}
.sim3d-section > p.sim3d-section-sub {
    font-size: 13px; color: var(--text-tertiary);
    margin: 0 auto 14px; line-height: 1.5;
    text-align: center; max-width: 56ch;
}

/* Cabeçalho */
.sim3d-head {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.sim3d-head-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sim3d-head-txt strong { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.sim3d-head-txt span {
    font-size: 12.5px; color: var(--text-tertiary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sim3d-close {
    margin-left: auto; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid var(--border);
    background: transparent; color: var(--text-secondary);
    font-size: 22px; line-height: 1; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.sim3d-close:hover { background: var(--bg-hover); color: var(--text-primary); }

/* Corpo: viewport + painel */
.sim3d-body {
    flex: 1; min-height: 0;
    display: grid; grid-template-columns: 1fr 280px;
}

.sim3d-stage { position: relative; min-height: 0; }
/* Só no MODAL o viewport preenche o palco. Sem o `.sim3d-backdrop` na frente
   esta regra empata em especificidade com a do embutido e, por vir depois no
   arquivo, ganha dela — o canvas voltava a esticar 1800px atrás do painel. No
   modal o `height: 100%` é obrigatório: o item do grid agora é o palco, e sem
   ele o viewport desabaria na altura do conteúdo. */
/* No modal o palco é preenchido pelo bloco, e dentro dele o viewport toma o
   espaço que a fila de miniaturas não usa. */
.sim3d-backdrop .sim3d-stage > .sim3d-sticky {
    height: 100%;
    display: flex; flex-direction: column; min-height: 0;
}
.sim3d-backdrop .sim3d-sticky > .sim3d-viewport { flex: 1; min-height: 0; }

.sim3d-viewport {
    position: relative;
    background: linear-gradient(160deg, #f4f0ea 0%, #e8e2da 100%);
    overflow: hidden;
    touch-action: none;
}
.sim3d-viewport.drop-hover { outline: 2px dashed var(--accent); outline-offset: -10px; }
.sim3d-canvas { display: block; width: 100%; height: 100%; }

/* Marca d'água sobre a vista ao vivo.
   O canvas do WebGL não carrega isto — quem carrega são as imagens geradas
   (ver marcaDagua em simulador3d.js). Esta camada existe pro PRINT DE TELA, que
   é o outro jeito de levar o mockup embora sem comprar. Ladrilhada porque
   recortar o copo do print não deve tirar a marca junto.
   `pointer-events:none` é obrigatório: sem isso ela engoliria o arraste da arte
   e o giro do copo, trocando uma proteção por um simulador quebrado. */
.sim3d-viewport { position: relative; }
.sim3d-marca {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background-image: var(--sim3d-marca, none);
    background-repeat: repeat;
    background-size: 190px auto;
    opacity: 0.10;
}

.sim3d-loading {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    color: var(--text-secondary); font-size: 13px; text-align: center;
    background: inherit;
}
.sim3d-loading p { margin: 0; }
.sim3d-loading small { color: var(--text-tertiary); }

.sim3d-hint {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    background: rgba(10, 37, 64, 0.62); color: #fff;
    font-size: 11.5px; font-weight: 500;
    padding: 6px 12px; border-radius: 999px;
    pointer-events: none; white-space: nowrap;
}
.sim3d-vp-btn {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.88); color: var(--text-secondary);
    cursor: pointer; transition: background 0.15s;
}
.sim3d-vp-btn:hover { background: #fff; color: var(--text-primary); }
.sim3d-vp-btn svg { width: 17px; height: 17px; }

/* Setas de giro. Coladas na borda e centradas na altura: é onde a mão procura,
   e ali elas não cobrem o copo, que fica no meio. */
.sim3d-vp-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.9); color: var(--text-secondary);
    cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.1s;
    z-index: 2;
}
.sim3d-vp-arrow.is-left  { left: 10px; }
.sim3d-vp-arrow.is-right { right: 10px; }
.sim3d-vp-arrow:hover { background: #fff; color: var(--text-primary); }
.sim3d-vp-arrow:active { transform: translateY(-50%) scale(0.92); }
.sim3d-vp-arrow svg { width: 20px; height: 20px; }

/* Os outros lados */
.sim3d-espelhos { padding: 10px 0 2px; }
.sim3d-espelhos-cab {
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    padding: 0 4px 7px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
}
.sim3d-espelhos-cab span { font-weight: 400; font-size: 11px; color: var(--text-tertiary); }
.sim3d-espelhos-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sim3d-espelho {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 4px 5px;
    border: 1px solid var(--border); border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.sim3d-espelho:hover { background: #fff; border-color: var(--accent); }
/* O canvas já vem recortado no copo e em resolução maior que a da tela, então
   aqui ele só se ajusta à coluna. O teto de altura existe pro palco largo, onde
   três miniaturas em proporção cheia empurrariam o painel pra baixo. */
.sim3d-espelho canvas {
    display: block; width: 100%; height: auto;
    max-height: 200px; object-fit: contain;
}
.sim3d-espelho span { font-size: 10.5px; font-weight: 600; color: var(--text-tertiary); }

/* Painel de controles */
.sim3d-panel {
    border-left: 1px solid var(--border);
    padding: 18px 18px 22px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 18px;
    background: var(--bg-surface-solid);
}
.sim3d-group { display: flex; flex-direction: column; gap: 8px; }
/* Slot preenchido pela página do produto (cor, tinta, arte). O conteúdo traz o
   próprio espaçamento — o gap do grupo aqui só duplicaria margem. */
.sim3d-group.sim3d-slot { gap: 0; }
.sim3d-group.sim3d-slot:empty { display: none; }
.sim3d-group.sim3d-slot .cor-picker:last-child,
.sim3d-group.sim3d-slot > *:last-child { margin-bottom: 0; }
.sim3d-group > label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-tertiary);
    display: flex; align-items: center; justify-content: space-between;
}
.sim3d-group > label b { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sim3d-note { font-size: 11px; line-height: 1.45; color: var(--text-tertiary); margin: 0; }

/* Arte */
.sim3d-art { display: flex; align-items: center; gap: 12px; }
.sim3d-art-thumb {
    width: 60px; height: 60px; flex-shrink: 0;
    border-radius: 10px; border: 1px solid var(--border);
    background: repeating-conic-gradient(#f2f2f4 0% 25%, #fff 0% 50%) 50% / 12px 12px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; cursor: pointer;
}
.sim3d-art-thumb canvas { max-width: 100%; max-height: 100%; display: block; }
.sim3d-art-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sim3d-art-info strong {
    font-size: 12.5px; color: var(--text-primary); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sim3d-link {
    background: none; border: none; padding: 0;
    font-size: 12px; font-weight: 600; color: var(--accent);
    cursor: pointer; text-align: left;
}
.sim3d-link:hover { text-decoration: underline; }

/* Modelo do produto — informativo, não é escolha */
.sim3d-cup-atual {
    display: inline-flex; align-items: center; gap: 8px;
    align-self: flex-start;
    padding: 8px 14px 8px 10px; border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-base);
    color: var(--text-primary);
    font-size: 12.5px; font-weight: 600;
}
.sim3d-cup-ic svg { width: 22px; height: 22px; display: block; }

/* Cores */
.sim3d-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.sim3d-sw {
    width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid var(--border-strong);
    padding: 0; cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
}
.sim3d-sw:hover { transform: scale(1.12); }
.sim3d-sw.active { box-shadow: 0 0 0 2px var(--bg-surface-solid), 0 0 0 4px var(--accent); }
/* Acabamento da paleta: a bolinha já avisa que a cor vaza. */
.sim3d-sw.is-translucida { opacity: 0.72; }
.sim3d-sw.is-neon { opacity: 0.85; filter: saturate(1.25); }
.sim3d-sw.is-metalica { background-image: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(0,0,0,0.25)); }
.sim3d-sw-custom {
    position: relative; overflow: hidden;
    background: conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}
.sim3d-sw-custom input {
    position: absolute; inset: 0; opacity: 0;
    width: 100%; height: 100%; border: none; padding: 0; cursor: pointer;
}

/* Ranges e selects */
.sim3d-panel input[type="range"] {
    width: 100%; height: 4px; -webkit-appearance: none; appearance: none;
    background: var(--border-strong); border-radius: 999px; outline: none; cursor: pointer;
}
.sim3d-panel input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent); border: 2px solid #fff;
    box-shadow: var(--shadow-sm); cursor: pointer;
}
.sim3d-panel input[type="range"]::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent); border: 2px solid #fff; cursor: pointer;
}
.sim3d-select {
    width: 100%; padding: 8px 10px;
    border-radius: 9px; border: 1px solid var(--border);
    background: var(--bg-surface-solid); color: var(--text-primary);
    font-size: 13px; font-family: inherit; cursor: pointer;
}
.sim3d-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--text-secondary); cursor: pointer;
}
.sim3d-check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

/* Ficha da arte — a medida que o cliente precisa pra montar o arquivo */
.sim3d-spec {
    display: flex; flex-direction: column; gap: 3px;
    margin-top: 10px; padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-base);
}
.sim3d-spec strong {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-tertiary);
}
.sim3d-spec b {
    font-size: 16px; font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.sim3d-spec span { font-size: 11px; line-height: 1.45; color: var(--text-secondary); }

/* Conferência do encaixe: a parede aberta e o arquivo de impressão */
.sim3d-fitcv, .sim3d-arccv {
    display: block; width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-base);
}
.sim3d-fitcv { cursor: grab; touch-action: none; }
.sim3d-fitcv:active { cursor: grabbing; }

/* Controle sem efeito no modo atual (ex: tamanho da arte no 360°) */
.sim3d-group.is-off > label,
.sim3d-group.is-off input[type="range"] { opacity: 0.45; }
.sim3d-group.is-off input[type="range"] { cursor: not-allowed; }

/* Avisos da área de impressão — só aparecem quando há o que avisar */
.sim3d-warn { display: none; }
.sim3d-warn.is-on {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(214, 145, 20, 0.35);
    background: rgba(255, 196, 61, 0.12);
}
.sim3d-warn span {
    font-size: 11.5px; line-height: 1.45;
    color: #8a5a00;
}
.sim3d-warn span::before { content: '⚠ '; }

/* Rodapé */
.sim3d-foot {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-base);
    flex-shrink: 0;
}
.sim3d-foot-note { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.4; }
/* O aviso do silk de 1 cor no rodapé do simulador. Cor e peso o tiram do
   cinza da letra miúda: ele está no mesmo parágrafo do "meramente
   ilustrativa" justamente porque é a continuação dele — mas é o que decide se
   o pedido vai a produção, não uma ressalva de tom. */
.sim3d-foot-alerta { display: inline; color: #8a5a00; font-weight: 700; }
.sim3d-foot-alerta u { text-decoration-thickness: 2px; text-underline-offset: 2px; }
.sim3d-foot-btns { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }

/* Botão de abrir o simulador na página do produto */
.sim3d-open-btn { display: inline-flex; align-items: center; gap: 8px; }
.sim3d-open-btn svg { width: 15px; height: 15px; }

/* ── Mobile: viewport em cima, controles rolando embaixo ── */
@media (max-width: 860px) {
    .sim3d-backdrop { padding: 0; }
    .sim3d-dialog { max-width: none; height: 100%; border-radius: 0; }
    .sim3d-body { grid-template-columns: 1fr; grid-template-rows: minmax(240px, 45vh) 1fr; }

    /* Embutido continua card, só empilha: rolar a página não pode virar
       briga com o scroll interno do painel. */
    .sim3d-section { padding: 0 var(--shop-gutter, 16px); }
    .sim3d-inline .sim3d-dialog { height: auto; border-radius: 14px; }
    .sim3d-inline .sim3d-body { grid-template-columns: 1fr; grid-template-rows: auto; }
    /* Empilhado não gruda: o 3D é o topo do card e rola junto com o resto.
       A altura já foi 88vw — 343px num celular de 390 —, e isso era o simulador
       ocupando quase uma tela inteira de rolagem no meio do caminho de quem
       está só passando por ele. Com 66vw o copo ainda sai com ~257px, que é
       tamanho de ver a arte, e sobra tela para o que vem antes e depois. Quem
       quer olhar de perto tem o zoom, as setas e as miniaturas dos outros
       lados. */
    .sim3d-inline .sim3d-stage { margin: 0; border-radius: 0; background: none; }
    .sim3d-inline .sim3d-sticky { position: static; }
    .sim3d-inline .sim3d-viewport {
        height: min(66vw, 320px);
        position: relative;
        margin: 0; border-radius: 0;
        background: linear-gradient(160deg, #f4f0ea 0%, #e8e2da 100%);
    }
    /* Miniatura tem que caber em três numa tela de 360 px sem virar selo: some
       a legenda longa do cabeçalho e a fila encosta nas bordas. */
    .sim3d-espelhos { padding: 8px 16px 0; }
    .sim3d-espelhos-cab span { display: none; }
    .sim3d-vp-arrow { width: 36px; height: 36px; }
    .sim3d-vp-arrow.is-left  { left: 6px; }
    .sim3d-vp-arrow.is-right { right: 6px; }
    /* Três botões no rodapé não cabem lado a lado num celular. */
    .sim3d-foot-btns { flex-wrap: wrap; }
    .sim3d-inline .sim3d-panel { overflow: visible; }
    .sim3d-panel { border-left: none; border-top: 1px solid var(--border); padding: 16px 16px 20px; }
    .sim3d-hint { font-size: 11px; bottom: 10px; }
    .sim3d-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px; }
    .sim3d-foot-note { text-align: center; }
    .sim3d-foot-btns { margin-left: 0; }
    .sim3d-foot-btns .mac-btn { flex: 1; justify-content: center; }
}

/* ============ Encaixe na área útil ============
   Era um <select> no meio da lista de campos do painel: ninguém abre um select
   para descobrir uma opção que não sabe que existe. Os três modos ficam à vista
   e o marcado é o encaixe EFETIVO — no 360° com automático ligado, quem manda é
   "Preencher", e marcar outro seria a tela discordando do copo. */
.sim3d-fit-opts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.sim3d-fit-opts button {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 8px;
    border: 1px solid var(--border, rgba(0,0,0,.14));
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #667);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.sim3d-fit-opts button:hover { border-color: var(--accent, #2f6df6); }
.sim3d-fit-opts button b { font-size: 12.5px; font-weight: 650; color: var(--text-primary, #111); }
.sim3d-fit-opts button span { font-size: 10.5px; line-height: 1.3; }
.sim3d-fit-opts button.on {
    border-color: var(--accent, #2f6df6);
    background: var(--bg-hover, rgba(47,109,246,.08));
    color: var(--text-primary, #111);
}

/* A frase da arte fora de medida. Laranja porque é aviso, não erro: o arquivo
   entra, a compra segue, e o que mudou é que o cliente está vendo a sobra em
   vez de um mockup esticado que parece pronto. */
.sim3d-fit-aviso {
    margin: 9px 0 0;
    padding: 8px 10px;
    border-radius: 9px;
    background: rgba(240, 150, 30, .12);
    border: 1px solid rgba(240, 150, 30, .35);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-primary, #111);
}
.sim3d-fit-aviso[hidden] { display: none; }

/* Slot declarado mas desenhado FORA do painel (a página do produto leva cor,
   tinta e arte para a própria coluna). Declarar continua sendo necessário — é o
   que impede o simulador de desenhar os seletores nativos dele por cima —, mas
   o grupo vazio deixaria um vão no painel. */
.sim3d-slot:empty { display: none; }

/* A marca d'água vai ATRÁS da peça.
   Ela existe para o PRINT DE TELA, e por isso continua ladrilhada e cobrindo o
   fundo inteiro; o que muda é que deixa de passar por cima do copo, onde
   atrapalhava justamente a conferência da arte. O canvas é transparente, então
   a marca aparece em toda a volta da peça e some por baixo dela.
   O preço disso está sabido: quem recortar exatamente o copo do print leva uma
   imagem sem marca. As duas camadas que protegem o arquivo de verdade — a da
   folha de aprovação e a do mockup baixado — continuam por cima, e são elas que
   valem quando a imagem circula. */
.sim3d-viewport > .sim3d-canvas { position: relative; z-index: 1; }
.sim3d-marca { z-index: 0; }