/* Acabamento visual: cantos, sombras, placeholders e parede da calculadora */
:root{--raio:16px}
.ph{border-radius:14px}
.oferta,.cat,.produto,.guia,.avaliacao{border-radius:var(--raio)}
.oferta{box-shadow:0 1px 2px rgba(43,46,51,.04); transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s}
.oferta:hover{border-color:#d9d2c3; box-shadow:0 14px 28px rgba(43,46,51,.10)}
.oferta .ph:not(.prod):not(.vazio) img,.cat .ph:not(.prod):not(.vazio) img{border-radius:12px}
/* foto recortada: palco suave em vez de fundo chapado */
.ph.prod{background:radial-gradient(ellipse 70% 55% at 50% 62%, #ece7dc 0%, rgba(236,231,220,0) 72%) !important}
.ph.prod img{filter:drop-shadow(0 10px 10px rgba(43,46,51,.22))}
/* placeholder "foto em breve" com silhueta */
.ph.vazio{flex-direction:column; gap:6px; background:linear-gradient(160deg,#f1ede4,#e6e0d3); color:#8a8d92; font-size:12px; letter-spacing:.02em; border:1px dashed #cfc8b8}
.ph.vazio svg{width:54px; height:40px; opacity:.55}
/* hero: some o corte reto do brilho amarelo */
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:70px; background:linear-gradient(to bottom, rgba(243,240,232,0), var(--mb-bege-100,#f3f0e8)); pointer-events:none; z-index:0}
.hero .container,.hero .wrap{position:relative; z-index:1}
/* parede da calculadora: blocos de concreto, não retângulos brancos */
.parede-bloco{border-radius:3px !important; background:linear-gradient(180deg,#d9d6cf,#b9b5ac) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 2px rgba(0,0,0,.25) !important}
.parede-bloco.vao{background:transparent !important; box-shadow:none !important}
.calc-resultado .ilustracao{border-radius:14px !important}
/* passos: seta sutil no lugar do tracejado */
.seta{color:#c9c2b2}
.passo .ic{background:#eaf0f8; border-radius:14px; padding:9px; width:52px; height:52px; box-sizing:border-box}
/* botões */
.btn{transition:transform .2s, box-shadow .2s, background .2s}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(20,40,80,.18)}
.pill{transition:background .2s,color .2s,border-color .2s}
@media (prefers-reduced-motion:reduce){.oferta,.btn{transition:none}}
#ofertas-grid{margin-bottom:24px}
.cat-hero .ph:not(.prod){height:420px; min-height:0}
.oferta .ph.prod:has(img[src*="bloco-vedacao"]){height:150px; padding:4px 4px 10px}

.artigo .capa img{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit}
@media (max-width:560px){
  .ofertas-grid{grid-template-columns:1fr !important; gap:12px}
  .oferta{display:grid; grid-template-columns:92px 1fr; column-gap:14px; align-content:center; padding:12px}
  .oferta .ph,.oferta .ph.prod:has(img[src*="bloco-vedacao"]){grid-column:1; grid-row:1 / span 5; height:92px; width:92px; margin:0; padding:2px; align-self:center}
  .oferta > :not(.ph){grid-column:2}
  .oferta .nome{min-height:0; margin-bottom:4px}
  .oferta.no-pedido::after{top:8px; right:8px}
}
@media (max-width:560px){ .oferta .tag-mat{justify-self:start} }
@media (min-width:561px){ .oferta .ph.prod{height:132px} }
/* faixa de região */
.regiao-bar{background:#EAF0F8; color:#1F4E8C; font:500 13px/1.4 inherit; font-family:inherit; padding:7px 24px; display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; text-align:center}
.regiao-bar[hidden]{display:none}
.regiao-bar svg{width:15px; height:15px; flex:none}
.regiao-bar b{font-weight:700}
.regiao-bar button,.regiao-bar select{font:inherit; font-size:12.5px; color:#1F4E8C; background:#fff; border:1px solid #b9c9e0; border-radius:99px; padding:3px 12px; cursor:pointer}
.regiao-bar button:hover{background:#dbe6f5}
.card a{color:var(--mb-azul-700,#1F4E8C); font-weight:600; text-decoration:underline; text-underline-offset:3px}

/* Celular: coluna de grid com 1fr cresce até o conteúdo (parede da calculadora) e alarga a página inteira.
   minmax(0,1fr) deixa a coluna encolher; overflow-x:clip é a rede de segurança. */
html,body{overflow-x:clip}
.calc-grid>*,.campos-grid>*,.hero-grid>*,.banner>*{min-width:0}
@media (max-width:900px){
  .calc-grid{grid-template-columns:minmax(0,1fr)}
  .campos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc-resultado .ilustracao,.ilustracao{overflow:hidden;max-width:100%}
}
@media (max-width:560px){
  .btn{white-space:normal;max-width:100%;text-align:center;line-height:1.25;padding-left:16px;padding-right:16px}
  .campos-grid .campo:last-child{grid-column:1/-1}
}

/* Faixa de região: campo livre da cidade */
.regiao-bar input{font:inherit; font-size:12.5px; color:#1F4E8C; background:#fff; border:1px solid #b9c9e0; border-radius:99px; padding:3px 12px; width:190px; max-width:100%}

/* Quem somos · Como funciona: colunas centralizadas, círculo numerado ao centro e linha ligando os passos */
@media (min-width:901px){
  body[data-ativa="sobre"] .passos{gap:24px; text-align:center; max-width:960px; margin:0 auto}
  body[data-ativa="sobre"] .passo{padding-top:58px}
  body[data-ativa="sobre"] .passo::before{left:50%; margin-left:-19px}
  body[data-ativa="sobre"] .passo:not(:last-child)::after{content:""; position:absolute; top:19px; left:calc(50% + 30px); width:calc(100% - 36px); border-top:2px dashed #c9c2b2}
  body[data-ativa="sobre"] .passo span{display:block; max-width:200px; margin:0 auto}
}
@media (max-width:900px){
  body[data-ativa="sobre"] .passos{grid-template-columns:1fr; gap:18px; max-width:420px; margin:0 auto}
  body[data-ativa="sobre"] .passo{padding:2px 0 0 56px; min-height:40px}
  body[data-ativa="sobre"] .passo:not(:last-child)::after{content:""; position:absolute; left:18px; top:42px; bottom:-14px; border-left:2px dashed #c9c2b2}
}