/* ==========================================================
   Eh! Agora — Sistema de Design
   Compartilhado entre site institucional, PWA e painel admin.
   Direção: editorial "mural de bairro" — plano, verde-oliva
   dominante, sem sombra pronunciada, sem cantos muito
   arredondados. Deliberadamente distante do Black Vitalício.
   ========================================================== */

:root{
  --oliva: #556B2F;
  --oliva-escuro: #37461D;
  --dourado: #E8B04D;
  --argila: #B04A2C;
  --creme: #F7F2E8;
  --creme-2: #EFE7D8;
  --grafite: #2B2B2B;
  --grafite-suave: #5C5A52;
  --linha: rgba(43,43,43,0.14);
  --branco: #FFFDF8;
  --sucesso: #556B2F;
  --alerta: #B04A2C;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Manrope", -apple-system, sans-serif;
  --mao: "Caveat", cursive;

  --max: 1180px;
  --radius: 3px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background: var(--creme);
  color: var(--grafite);
  font-family: var(--sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

:focus-visible{
  outline: 2.5px solid var(--argila);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; }

.paper-texture{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.5;
  background-image: radial-gradient(rgba(43,43,43,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* ================= HEADER ================= */
header{ position: sticky; top:0; z-index:50; background: var(--creme); border-bottom: 1px solid var(--linha); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }
.marca{ display:flex; align-items:baseline; gap:2px; font-family: var(--serif); font-weight:600; font-size:1.6rem; color:var(--oliva-escuro); }
.marca .grito{ font-family: var(--mao); font-weight:700; font-size:1.9rem; color:var(--argila); transform: rotate(-6deg); display:inline-block; margin-right:2px; }
nav.links{ display:flex; gap:34px; }
nav.links a{ font-size:0.95rem; font-weight:600; color:var(--grafite); position:relative; padding:6px 0; }
nav.links a.ativo{ color:var(--oliva-escuro); }
nav.links a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--oliva); transition:width .25s ease; }
nav.links a:hover::after, nav.links a.ativo::after{ width:100%; }
.menu-burger{ display:none; background:none; border:none; cursor:pointer; }

.btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:700; font-size:0.92rem; padding:12px 22px; border-radius: var(--radius); border:1.5px solid var(--oliva-escuro); cursor:pointer; transition: transform .18s ease, background .2s ease, color .2s ease; }
.btn-primario{ background:var(--oliva-escuro); color:var(--branco); }
.btn-primario:hover{ background:var(--oliva); transform:translateY(-2px); }
.btn-fantasma{ background:transparent; color:var(--oliva-escuro); }
.btn-fantasma:hover{ background:var(--oliva-escuro); color:var(--branco); }
.btn-pequeno{ padding:10px 18px; font-size:0.85rem; }

/* ================= HERO PADRÃO DE PÁGINA INTERNA ================= */
.hero-interno{ padding:64px 0 56px; border-bottom:1px solid var(--linha); position:relative; z-index:1; }
.eyebrow{ font-size:0.82rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--oliva); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--oliva); display:inline-block; }
.hero-interno h1{ font-family:var(--serif); font-weight:600; font-size:clamp(2.2rem, 4.4vw, 3.6rem); line-height:1.06; color:var(--grafite); letter-spacing:-0.01em; max-width:780px; }
.hero-interno h1 em{ font-style:normal; color:var(--oliva-escuro); background: linear-gradient(180deg, transparent 62%, var(--dourado) 62%); }
.hero-interno p.lead{ margin-top:24px; max-width:560px; font-size:1.08rem; color:var(--grafite-suave); }
.hero-cta{ margin-top:32px; display:flex; gap:16px; flex-wrap:wrap; }

/* ================= HERO HOME (mural) ================= */
.hero{ position:relative; z-index:1; padding: 76px 0 40px; border-bottom: 1px solid var(--linha); }
.hero-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap:56px; align-items:end; }
.hero h1{ font-family:var(--serif); font-weight:600; font-size:clamp(2.6rem, 5.4vw, 4.5rem); line-height:1.03; color:var(--grafite); letter-spacing:-0.01em; }
.hero h1 em{ font-style:normal; color:var(--oliva-escuro); background: linear-gradient(180deg, transparent 62%, var(--dourado) 62%); }
.hero p.lead{ margin-top:26px; max-width:480px; font-size:1.12rem; color:var(--grafite-suave); }

.selo{ position:absolute; top:64px; right:28px; width:118px; height:118px; border-radius:50%; border:2.5px solid var(--argila); color:var(--argila); display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--mao); font-weight:700; font-size:1.05rem; line-height:1.15; transform: rotate(11deg); background: var(--creme); }
.selo span{ display:block; }

.mural{ position:relative; background:var(--branco); border:1px solid var(--linha); border-radius: var(--radius); padding:22px; min-height:340px; }
.mural::before{ content:"grupo · ofertas de bairro"; position:absolute; top:-11px; left:18px; background:var(--creme); padding:2px 10px; font-size:0.72rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--oliva-escuro); border:1px solid var(--linha); border-radius:20px; }
.msg{ display:flex; gap:10px; padding:12px 0; border-bottom:1px dashed var(--linha); }
.msg:last-child{ border-bottom:none; }
.avatar{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:600; font-size:0.85rem; color:var(--branco); }
.msg:nth-child(1) .avatar{ background:var(--oliva); }
.msg:nth-child(2) .avatar{ background:var(--dourado); color:var(--grafite); }
.msg:nth-child(3) .avatar{ background:var(--argila); }
.msg:nth-child(4) .avatar{ background:var(--oliva-escuro); }
.msg-corpo{ font-size:0.88rem; }
.msg-nome{ font-weight:700; font-size:0.82rem; color:var(--oliva-escuro); }
.msg-hora{ font-size:0.72rem; color:var(--grafite-suave); margin-left:6px; font-weight:500; }

/* ================= TICKER ================= */
.ticker-area{ background:var(--oliva-escuro); overflow:hidden; border-bottom:1px solid var(--linha); }
.ticker-track{ display:flex; white-space:nowrap; animation: rolar 32s linear infinite; }
.ticker-track span{ color: var(--creme); font-size:0.85rem; font-weight:600; padding:13px 34px; border-right:1px solid rgba(247,242,232,0.18); }
.ticker-track span b{ color:var(--dourado); font-weight:800; }
@keyframes rolar{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ================= SEÇÃO GENÉRICA ================= */
section{ position:relative; z-index:1; padding:96px 0; border-bottom:1px solid var(--linha); }
.titulo-secao{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:40px; margin-bottom:56px; align-items:start; }
.titulo-secao .eyebrow{ margin-bottom:14px; }
.titulo-secao h2{ font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem, 3.2vw, 2.7rem); line-height:1.12; color:var(--grafite); }
.titulo-secao .desc{ font-size:1.02rem; color:var(--grafite-suave); padding-top:8px; }

/* ---- Grupos temáticos (grid 4 colunas, usado na Home e página Grupos) ---- */
.grupos{ display:grid; grid-template-columns: repeat(4, 1fr); gap:0; border:1px solid var(--linha); }
.grupo{ padding:32px 26px; border-right:1px solid var(--linha); transition: background .2s ease; }
.grupo:last-child{ border-right:none; }
.grupo:hover{ background:var(--branco); }
.grupo .num{ font-family:var(--serif); font-size:0.85rem; font-weight:600; color:var(--argila); margin-bottom:14px; display:block; }
.grupo h3{ font-family:var(--serif); font-size:1.25rem; font-weight:600; margin-bottom:10px; color:var(--oliva-escuro); }
.grupo p{ font-size:0.9rem; color:var(--grafite-suave); }

/* ---- Cartão de grupo detalhado (página Grupos) ---- */
.grupo-detalhado{ display:grid; grid-template-columns: 1fr 1.3fr; gap:0; border:1px solid var(--linha); margin-bottom:-1px; }
.grupo-detalhado .lado-info{ padding:38px; border-right:1px solid var(--linha); }
.grupo-detalhado .lado-exemplo{ padding:38px; background:var(--branco); }
.grupo-detalhado h3{ font-family:var(--serif); font-size:1.6rem; font-weight:600; color:var(--oliva-escuro); margin-bottom:12px; }
.grupo-detalhado .tag{ display:inline-block; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:4px 10px; border:1px solid var(--linha); border-radius:20px; color:var(--grafite-suave); margin-bottom:16px; }
.grupo-detalhado p{ color:var(--grafite-suave); font-size:0.96rem; }
.exemplo-rotulo{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--oliva); margin-bottom:14px; }

/* ---- Anuncie (lojista) ---- */
.anuncie-bloco{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
.lista-check{ margin-top:24px; }
.lista-check li{ display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--linha); font-size:0.96rem; }
.lista-check li:first-child{ border-top:none; }
.lista-check .marca-check{ font-family:var(--serif); color:var(--oliva); font-weight:700; font-size:1.05rem; flex-shrink:0; }
.painel-mock{ background:var(--oliva-escuro); border-radius: var(--radius); padding:28px; color:var(--creme); }
.painel-mock .linha-topo{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.painel-mock .linha-topo span{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; opacity:0.7; }
.painel-card{ background:rgba(247,242,232,0.06); border:1px solid rgba(247,242,232,0.16); border-radius:var(--radius); padding:18px; margin-bottom:12px; }
.painel-card .rotulo{ font-size:0.72rem; opacity:0.65; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.05em; }
.painel-card .valor{ font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--dourado); }
.painel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ---- Planos (pricing) ---- */
.planos{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--linha); }
.plano{ padding:36px 30px; border-right:1px solid var(--linha); position:relative; }
.plano:last-child{ border-right:none; }
.plano.destaque{ background:var(--oliva-escuro); color:var(--creme); }
.plano .selo-popular{ position:absolute; top:-1px; right:-1px; background:var(--dourado); color:var(--grafite); font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; padding:5px 12px; }
.plano h3{ font-family:var(--serif); font-size:1.35rem; font-weight:600; margin-bottom:6px; }
.plano.destaque h3{ color:var(--dourado); }
.plano:not(.destaque) h3{ color:var(--oliva-escuro); }
.plano .preco{ font-family:var(--serif); font-size:2.3rem; font-weight:600; margin:18px 0 4px; }
.plano .preco span{ font-family:var(--sans); font-size:0.85rem; font-weight:600; opacity:0.7; }
.plano .cota{ font-size:0.85rem; opacity:0.75; margin-bottom:24px; }
.plano ul{ margin-bottom:28px; }
.plano ul li{ font-size:0.88rem; padding:8px 0; border-top:1px solid rgba(43,43,43,0.1); }
.plano.destaque ul li{ border-top:1px solid rgba(247,242,232,0.16); }
.plano ul li:first-child{ border-top:none; }
.plano .btn{ width:100%; justify-content:center; }
.plano.destaque .btn-primario{ background:var(--dourado); border-color:var(--dourado); color:var(--oliva-escuro); }
.plano.destaque .btn-primario:hover{ background:var(--creme); border-color:var(--creme); }

/* ---- Passos (sequência real — usar número só quando a ordem importa) ---- */
.passos{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.passo .num-grande{ font-family:var(--serif); font-size:2.4rem; font-weight:600; color:var(--dourado); -webkit-text-stroke: 1.5px var(--oliva-escuro); color:transparent; display:block; margin-bottom:10px; }
.passo h4{ font-family:var(--serif); font-size:1.15rem; font-weight:600; color:var(--oliva-escuro); margin-bottom:8px; }
.passo p{ font-size:0.92rem; color:var(--grafite-suave); }

/* ---- Estatísticas ---- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--linha); }
.stat{ padding:28px; border-right:1px solid var(--linha); text-align:center; }
.stat:last-child{ border-right:none; }
.stat .num{ font-family:var(--serif); font-size:2.1rem; font-weight:600; color:var(--oliva-escuro); }
.stat .rotulo{ font-size:0.8rem; color:var(--grafite-suave); margin-top:4px; }

/* ---- FAQ (acordeão) ---- */
.faq-item{ border-top:1px solid var(--linha); }
.faq-item:last-child{ border-bottom:1px solid var(--linha); }
.faq-pergunta{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:22px 4px; display:flex; justify-content:space-between; align-items:center; font-family:var(--serif); font-size:1.08rem; font-weight:600; color:var(--grafite); gap:20px; }
.faq-pergunta .sinal{ font-family:var(--sans); font-size:1.3rem; color:var(--oliva); flex-shrink:0; transition:transform .2s ease; }
.faq-item.aberto .faq-pergunta .sinal{ transform:rotate(45deg); }
.faq-resposta{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.aberto .faq-resposta{ max-height:280px; }
.faq-resposta p{ padding:0 4px 22px; font-size:0.94rem; color:var(--grafite-suave); max-width:640px; }

/* ---- Bastidor ---- */
.bastidor{ background:var(--creme-2); }
.pessoas{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; border:1px solid var(--linha); }
.pessoa{ padding:30px 24px; border-right:1px solid var(--linha); background:var(--branco); }
.pessoa:last-child{ border-right:none; }
.foto-placeholder{ width:56px; height:56px; border-radius:50%; margin-bottom:16px; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:600; color:var(--branco); font-size:1.1rem; }
.pessoa:nth-child(1) .foto-placeholder{ background:var(--oliva); }
.pessoa:nth-child(2) .foto-placeholder{ background:var(--argila); }
.pessoa:nth-child(3) .foto-placeholder{ background:var(--dourado); color:var(--grafite); }
.pessoa h4{ font-family:var(--serif); font-size:1.05rem; margin-bottom:4px; }
.pessoa .funcao{ font-size:0.8rem; color:var(--oliva-escuro); font-weight:700; margin-bottom:12px; }
.pessoa p{ font-size:0.88rem; color:var(--grafite-suave); }

/* ---- Manifesto / valores (Bastidor) ---- */
.valores{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:1px solid var(--linha); margin-top:-1px; }
.valor-item{ padding:30px; border-right:1px solid var(--linha); border-top:1px solid var(--linha); }
.valor-item:nth-child(2n){ border-right:none; }
.valor-item h4{ font-family:var(--serif); color:var(--oliva-escuro); font-size:1.1rem; margin-bottom:8px; }
.valor-item p{ font-size:0.9rem; color:var(--grafite-suave); }

/* ---- Contato ---- */
.contato-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; }
.form-contato .campo{ margin-bottom:20px; }
.form-contato label{ display:block; font-size:0.82rem; font-weight:700; color:var(--oliva-escuro); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.03em; }
.form-contato input, .form-contato textarea, .form-contato select{
  width:100%; padding:13px 14px; border:1.5px solid var(--linha); border-radius:var(--radius);
  background:var(--branco); font-family:var(--sans); font-size:0.95rem; color:var(--grafite);
  transition:border-color .2s ease;
}
.form-contato input:focus, .form-contato textarea:focus, .form-contato select:focus{ border-color:var(--oliva); outline:none; }
.form-contato textarea{ resize:vertical; min-height:120px; }
.info-contato-item{ display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--linha); }
.info-contato-item:first-child{ border-top:none; }
.info-contato-item .icone{ font-size:1.3rem; }
.info-contato-item h4{ font-family:var(--serif); font-size:1rem; color:var(--oliva-escuro); margin-bottom:2px; }
.info-contato-item p{ font-size:0.9rem; color:var(--grafite-suave); }
.msg-enviada{ display:none; background:var(--oliva); color:var(--branco); padding:16px 18px; border-radius:var(--radius); font-size:0.92rem; font-weight:600; margin-top:16px; }
.msg-enviada.mostrar{ display:block; }

/* ---- CTA final ---- */
.cta-final{ background: var(--oliva-escuro); color:var(--creme); text-align:center; border-bottom:none; }
.cta-final h2{ font-family:var(--serif); font-weight:600; font-size:clamp(2rem,4vw,3.2rem); margin-bottom:20px; }
.cta-final .grito{ font-family:var(--mao); color:var(--dourado); font-size:1.15em; }
.cta-final p{ max-width:480px; margin:0 auto 34px; color:rgba(247,242,232,0.78); }
.cta-final .hero-cta{ justify-content:center; }
.cta-final .btn-primario{ background:var(--dourado); border-color:var(--dourado); color:var(--oliva-escuro); }
.cta-final .btn-primario:hover{ background:var(--creme); border-color:var(--creme); }
.cta-final .btn-fantasma{ border-color:var(--creme); color:var(--creme); }
.cta-final .btn-fantasma:hover{ background:var(--creme); color:var(--oliva-escuro); }

/* ---- Footer ---- */
footer{ padding:48px 0 36px; }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; align-items:center; }
.footer-grid .marca{ font-size:1.15rem; }
.footer-links{ display:flex; gap:26px; }
.footer-links a{ font-size:0.85rem; font-weight:600; color:var(--grafite-suave); }
.footer-links a:hover{ color:var(--oliva-escuro); }
.footer-legal{ font-size:0.78rem; color:var(--grafite-suave); margin-top:22px; border-top:1px solid var(--linha); padding-top:18px; }

/* ================= RESPONSIVO ================= */
@media (max-width: 920px){
  nav.links{ display:none; }
  .menu-burger{ display:block; }
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .selo{ display:none; }
  .titulo-secao{ grid-template-columns:1fr; gap:16px; }
  .grupos{ grid-template-columns: repeat(2,1fr); }
  .grupo{ border-bottom:1px solid var(--linha); }
  .grupo:nth-child(2){ border-right:none; }
  .grupo:nth-child(4){ border-right:none; }
  .grupo-detalhado{ grid-template-columns:1fr; }
  .grupo-detalhado .lado-info{ border-right:none; border-bottom:1px solid var(--linha); }
  .anuncie-bloco{ grid-template-columns:1fr; gap:36px; }
  .pessoas{ grid-template-columns:1fr; }
  .pessoa{ border-right:none; border-bottom:1px solid var(--linha); }
  .planos{ grid-template-columns:1fr; }
  .plano{ border-right:none; border-bottom:1px solid var(--linha); }
  .passos{ grid-template-columns:1fr; gap:28px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:none; }
  .valores{ grid-template-columns:1fr; }
  .valor-item{ border-right:none !important; }
  .contato-grid{ grid-template-columns:1fr; gap:40px; }
  section{ padding:64px 0; }
}

/* ================= VITRINE ================= */
.filtros{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; }
.filtro-btn{
  font-family:var(--sans); font-weight:700; font-size:0.86rem; padding:9px 18px;
  border:1.5px solid var(--linha); border-radius:20px; background:var(--branco);
  color:var(--grafite-suave); cursor:pointer; transition:all .18s ease;
}
.filtro-btn:hover{ border-color:var(--oliva); color:var(--oliva-escuro); }
.filtro-btn.ativo{ background:var(--oliva-escuro); border-color:var(--oliva-escuro); color:var(--creme); }

.vitrine-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linha); border:1px solid var(--linha); }
.promo-card{ background:var(--branco); padding:0; display:flex; flex-direction:column; }
.promo-imagem{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:2.4rem; font-weight:600; color:var(--branco);
  position:relative; overflow:hidden;
}
.promo-imagem .selo-validade{
  position:absolute; top:10px; right:10px; background:rgba(43,43,43,0.75); color:var(--creme);
  font-size:0.68rem; font-weight:700; padding:4px 9px; border-radius:20px; letter-spacing:0.02em;
}
.promo-corpo{ padding:20px; flex:1; display:flex; flex-direction:column; }
.promo-loja{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.promo-loja .avatar{ width:26px; height:26px; font-size:0.68rem; }
.promo-loja span{ font-size:0.82rem; font-weight:700; color:var(--oliva-escuro); }
.promo-corpo h3{ font-family:var(--serif); font-size:1.15rem; font-weight:600; margin-bottom:10px; line-height:1.25; }
.promo-preco{ display:flex; align-items:baseline; gap:8px; margin-bottom:16px; }
.promo-preco .de{ font-size:0.85rem; color:var(--grafite-suave); text-decoration:line-through; }
.promo-preco .por{ font-family:var(--serif); font-size:1.4rem; font-weight:600; color:var(--oliva-escuro); }
.promo-rodape{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.promo-segmento{ font-size:0.72rem; color:var(--grafite-suave); text-transform:uppercase; letter-spacing:0.03em; }
.promo-cta{ font-size:0.82rem; font-weight:700; color:var(--oliva); white-space:nowrap; }
.promo-cta:hover{ text-decoration:underline; }

.vazio-estado{ display:none; text-align:center; padding:70px 20px; border:1px dashed var(--linha); }
.vazio-estado.mostrar{ display:block; }
.vazio-estado h3{ font-family:var(--serif); font-size:1.4rem; color:var(--oliva-escuro); margin-bottom:10px; }
.vazio-estado p{ color:var(--grafite-suave); font-size:0.95rem; }

.carregar-mais{ text-align:center; margin-top:40px; }

@media (max-width:920px){
  .vitrine-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .vitrine-grid{ grid-template-columns:1fr; }
}