/* ─────────────────────────────────────────────────────────────────────────
   VATSE Mercado · página de venda: O ENCARTE

   Arquétipo desta página: o encarte pendurado na entrada do mercado. Onde o
   PDV é assimétrico e cinematográfico, aqui tudo é CENTRADO e frontal, como
   um cartaz: título no meio, etiqueta amarela de preço, e a tela do caixa
   ocupando a largura inteira logo abaixo da dobra. O miolo é um mosaico de
   etiquetas, não uma linha do tempo.
   ───────────────────────────────────────────────────────────────────────── */

.vmk-sales {
    --vmk: var(--sys-accent, #15803d);
    --vmk-tinta: #0d1f10;
    --vmk-creme: #fbf8ef;
    --vmk-linha: #e6e1d0;
    --vmk-suave: #67705f;
    --vmk-etiqueta: #facc15;
    background: var(--vmk-creme);
    color: #14200f;
}
.vmk-sales .sc-container { max-width: 1180px; }

/* ── Hero centrado, como um cartaz ────────────────────────────────────── */
.vmk-hero {
    position: relative;
    background: linear-gradient(178deg, var(--vmk-tinta) 0%, #133a1c 100%);
    color: #fff;
    padding: 78px 0 0;
    overflow: hidden;
    text-align: center;
}
.vmk-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 16px, transparent 16px 32px);
}
.vmk-hero-inner { position: relative; z-index: 1; }
.vmk-selo {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--vmk-etiqueta); color: #3d2c00;
    font-size: 0.80rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
    border-radius: 999px; padding: 9px 18px;
}
.vmk-hero h1 {
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    font-weight: 900; letter-spacing: -.05em; line-height: .98;
    margin: 22px auto 16px; max-width: 14ch;
}
.vmk-hero h1 em { font-style: normal; color: color-mix(in srgb, var(--vmk) 45%, #fff); }
.vmk-hero p {
    color: rgba(255, 255, 255, .78); line-height: 1.7;
    margin: 0 auto 30px; max-width: 56ch; font-size: 1.06rem;
}
.vmk-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.vmk-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 15px 28px; border-radius: 10px;
    font-weight: 800; font-size: .95rem; text-decoration: none;
    transition: transform .18s ease;
}
.vmk-btn:hover { transform: translateY(-2px); }
.vmk-btn-primary { background: var(--vmk-etiqueta); color: #3d2c00; }
.vmk-btn-ghost { border: 1px solid rgba(255, 255, 255, .3); color: #fff; }
.vmk-btn-outline-light { border: 1px solid rgba(255, 255, 255, .4); color: #fff; }
.vmk-proof {
    display: flex; flex-wrap: wrap; gap: 22px; justify-content: center;
    margin-top: 26px; font-size: .83rem; color: rgba(255, 255, 255, .6);
}
.vmk-proof span { display: inline-flex; align-items: center; gap: 8px; }
.vmk-proof i { color: var(--vmk-etiqueta); }

/* A tela do caixa entra pela base do hero, larga, como a foto do encarte */
.vmk-palco { margin-top: 54px; padding: 0 20px; }
.vmk-palco-inner {
    max-width: 1080px; margin: 0 auto;
    border-radius: 14px 14px 0 0; overflow: hidden;
    box-shadow: 0 -10px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1);
}
.vmk-palco img { display: block; width: 100%; height: auto; }

/* ── Mosaico de etiquetas: a assinatura desta página ──────────────────── */
.vmk-etiquetas { padding: 76px 0; }
.vmk-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.vmk-section-tag {
    display: block; font-size: 0.80rem; font-weight: 900;
    letter-spacing: .18em; text-transform: uppercase;
    color: color-mix(in srgb, var(--vmk) 82%, #000); margin-bottom: 12px;
}
.vmk-section-tag-light { color: var(--vmk-etiqueta); }
.vmk-etiquetas h2, .vmk-componente h2, .vmk-duplo h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.5rem);
    font-weight: 900; letter-spacing: -.04em; line-height: 1.08; margin: 0 0 12px;
}
.vmk-componente-apoio, .vmk-head p { color: var(--vmk-suave); line-height: 1.75; margin: 0; }

.vmk-mosaico { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vmk-etiqueta-card {
    position: relative;
    background: #fff; border: 1px solid var(--vmk-linha); border-radius: 14px;
    padding: 30px 24px 26px;
    box-shadow: 0 20px 44px -38px rgba(13, 31, 16, .8);
}
.vmk-etiqueta-card::before {
    content: attr(data-preco);
    position: absolute; top: -13px; right: 18px;
    background: var(--vmk-etiqueta); color: #3d2c00;
    font-weight: 900; font-size: 0.80rem; border-radius: 999px; padding: 6px 13px;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35);
}
.vmk-etiqueta-card i { font-size: 1.35rem; color: var(--vmk); display: block; margin-bottom: 14px; }
.vmk-etiqueta-card h3 { font-size: 1.04rem; font-weight: 800; margin: 0 0 7px; letter-spacing: -.02em; }
.vmk-etiqueta-card p { font-size: .9rem; line-height: 1.65; color: var(--vmk-suave); margin: 0; }

/* ── Duplo: balança de um lado, tela do outro ─────────────────────────── */
.vmk-duplo { background: #fff; border-top: 1px solid var(--vmk-linha); border-bottom: 1px solid var(--vmk-linha); padding: 76px 0; }
.vmk-duplo-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 52px; align-items: center; }
.vmk-lista { display: grid; gap: 14px; margin-top: 26px; }
.vmk-lista div { display: flex; gap: 13px; align-items: flex-start; }
.vmk-lista i { color: var(--vmk); margin-top: 4px; }
.vmk-lista b { display: block; font-size: .98rem; font-weight: 800; margin-bottom: 3px; }
.vmk-lista span { font-size: .9rem; line-height: 1.65; color: var(--vmk-suave); }
.vmk-quadro {
    border-radius: 14px; overflow: hidden;
    border: 1px solid var(--vmk-linha);
    box-shadow: 0 34px 70px -50px rgba(13, 31, 16, .8);
}
.vmk-quadro img { display: block; width: 100%; height: auto; }

/* ── Faixa de números ─────────────────────────────────────────────────── */
.vmk-strip { background: var(--vmk-tinta); color: #fff; padding: 34px 0; }
.vmk-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.vmk-strip-grid > div { padding: 0 20px; border-right: 1px solid rgba(255, 255, 255, .1); }
.vmk-strip-grid > div:last-child { border-right: 0; }
.vmk-strip-grid strong { display: block; font-size: 1.7rem; font-weight: 900; color: var(--vmk-etiqueta); letter-spacing: -.03em; }
.vmk-strip-grid span { font-size: .82rem; color: rgba(255, 255, 255, .58); }

.vmk-paper { background: var(--vmk-creme); }
.vmk-componente { padding: 72px 0; }
.vmk-componente-justa { padding-top: 0; }
.vmk-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.vmk-chip {
    background: #fff; border: 1px solid var(--vmk-linha); border-radius: 999px;
    padding: 10px 18px; font-size: .88rem; font-weight: 600; color: #3f4a39;
}

.vmk-final { background: var(--vmk-tinta); color: #fff; padding: 80px 0; text-align: center; }
.vmk-final h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 900; letter-spacing: -.04em; margin: 0 0 26px; }
.vmk-actions-center { justify-content: center; }

@media (max-width: 1024px) {
    .vmk-mosaico { grid-template-columns: 1fr 1fr; }
    .vmk-duplo-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 640px) {
    .vmk-hero { padding-top: 54px; }
    .vmk-mosaico { grid-template-columns: 1fr; }
    .vmk-strip-grid { grid-template-columns: 1fr; gap: 22px; }
    .vmk-strip-grid > div { border-right: 0; }
    .vmk-etiquetas, .vmk-duplo, .vmk-componente { padding: 48px 0; }
}


/* -------------------------------------------------------------------------
   Átomos do núcleo em superfície clara
   -------------------------------------------------------------------------
   Planos e dúvidas vêm de core.css, desenhados sobre fundo escuro. Aqui eles
   caem sobre papel, e sem estas duas linhas o botão de vidro fica com tinta
   #f0f0f0 sobre um cartão quase branco: razão 1,01, ou seja, texto invisível
   num botão que vende. `--sv-accent-ink` é o acento já escurecido o bastante
   para ser lido como texto, medido contra o fundo real desta página.
   ------------------------------------------------------------------------- */
[data-venda="supermarket"] .sc-btn-glass{background:#fff;color:#16273d;border:1px solid rgba(22,39,61,.18)}
[data-venda="supermarket"] .sc-btn-glass:hover{background:#f3f6fa;color:#16273d;border-color:rgba(22,39,61,.32)}