/* Site do Cantin (loja-hml). Layout: tarja de vantagens, cabeçalho com selo, faixa do menu igual à fachada, abertura com a foto da loja, categorias em polaroide, prateleiras, visita. Um tema só, no papel da marca. */
:root {
  --papel: #f1e9da; --papel-2: #e7dcc7; --cartao: #fffdf8; --cafe: #4a2517; --cafe-2: #6b3a22; --tinta: #2b1a12; --cinza: #6d5b4e;
  --marinho: #1c2d47; --caramelo: #b9824a; --queijo: #f3cf73; --linha: #d9cbb3; --ok: #2f6b45; --alerta: #a3342c;
  --display: "Almendra", Georgia, "Times New Roman", serif;
  --selo: "Playfair Display SC", Georgia, serif; /* letras do anel do selo: O INESQUECIVEL SABOR DE MINAS / PARA SUA CASA */
  --body: "Work Sans", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } *, *::before { animation: none !important; transition: none !important } }
body { background: var(--papel); color: var(--tinta); font: 15px/1.55 var(--body);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23b9824a' stroke-opacity='.13' stroke-width='1.2'%3E%3Cpath d='M0 60h120M60 0v120'/%3E%3Ccircle cx='60' cy='60' r='22'/%3E%3Ccircle cx='60' cy='60' r='12'/%3E%3Cpath d='M8 8h30v30H8zM14 14h18v18H14zM82 82h30v30H82zM88 88l18 18M106 88l-18 18M82 8l30 30M82 22l16 16M8 82c10 0 10 30 30 30M8 96c6 0 6 16 16 16'/%3E%3C/svg%3E"); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--cartao) }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
button, input, select { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px }
h1, h2, h3 { font-family: var(--display); font-weight: 700; text-wrap: balance; margin: 0 }

.tarja { background: var(--cafe); color: #f6ead6; font-size: 13px }
.tarja .wrap { display: flex; gap: 6px 22px; flex-wrap: wrap; justify-content: center; padding-block: 7px }
.tarja b { color: var(--queijo) }
.proto { background: var(--queijo); color: var(--cafe); border-radius: 999px; padding: 0 8px; font-weight: 600 }

header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--cartao); box-shadow: 0 1px 0 var(--linha) }
.cab { display: flex; align-items: center; gap: 16px; padding-block: 8px }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cafe); flex: none }
.marca img { width: 62px; height: 62px }
.marca span { font: 800 20px/1 var(--display); display: flex; flex-direction: column }
.marca small { font: 600 10.5px/1.6 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--caramelo) }
.busca { flex: 1; min-width: 0 }
.busca input { width: 100%; padding: 10px 16px; border: 1px solid var(--linha); border-radius: 999px; background: var(--papel) }
.pill { border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 600; background: var(--marinho); color: #fff; display: inline-flex; align-items: center; gap: 8px; text-decoration: none }
.pill.claro { background: var(--cartao); color: var(--cafe); border: 1px solid var(--linha) }
.pill .n { background: var(--queijo); color: var(--cafe); border-radius: 999px; min-width: 22px; padding: 0 6px; text-align: center; font-size: 13px }
.pill:disabled { opacity: .45; cursor: not-allowed }
.menu { background: var(--cafe-2); background-image: linear-gradient(var(--cafe), var(--cafe-2)) }
.menu .wrap { display: flex; justify-content: center; align-items: center; gap: 4px 6px; flex-wrap: wrap; padding-block: 6px }
.menu button { background: none; border: 0; color: #f6ead6; font: 600 13.5px var(--body); letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px }
.menu button[aria-current="true"] { color: var(--queijo); box-shadow: inset 0 -2px 0 var(--queijo) }
.menu .e { color: var(--caramelo); font-family: var(--display); font-style: italic; letter-spacing: 0; text-transform: none; font-size: 15px }

.abre { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; padding-block: 40px 28px }
.abre .pre { font: 500 22px var(--display); color: var(--cafe-2) }
.abre h1 { font-size: clamp(42px, 6.4vw, 78px); line-height: .95; color: var(--marinho); letter-spacing: -.02em }
.abre h1 span { color: var(--cafe); display: block }
.abre p { color: var(--cinza); font-size: 17px; max-width: 46ch; margin: 14px 0 20px }
.abre .acoes { display: flex; gap: 10px; flex-wrap: wrap }
.polaroide { background: #fff; padding: 10px 10px 30px; box-shadow: 0 10px 28px rgb(60 30 10 / .22); transform: rotate(2.2deg); position: relative; max-width: 100% }
.polaroide::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; transform: translateX(-50%) rotate(-4deg); background: rgb(60 60 60 / .28) }
.polaroide img { display: block; width: 100%; height: auto }
.polaroide figcaption { font: 600 14px var(--display); color: var(--cafe); text-align: center; padding-top: 8px }

.vantagens { border-block: 1px solid var(--linha); background: rgb(255 253 248 / .6) }
.vantagens .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-block: 14px }
.vant { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--cafe) }
.vant svg { flex: none; width: 30px; height: 30px; stroke: var(--caramelo); fill: none; stroke-width: 1.6 }
.vant b { display: block; font-weight: 600 }

.secao { padding-block: 34px 6px }
.secao > h2 { font-size: 32px; color: var(--cafe); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px }
.secao > h2 small { font: 500 14px var(--body); color: var(--cinza) }
#loja h2 { font-size: 30px; color: var(--cafe); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px }
#loja h3 { font-size: 22px; color: var(--cafe-2); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding-top: 10px; border-top: 1px dashed var(--linha) }
#loja small { font: 500 13.5px var(--body); color: var(--cinza) }
.card:has(.selo.fim) .foto { filter: grayscale(.85); opacity: .65 }
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px }
.cat { border: 0; background: var(--cartao); border-radius: 4px; padding: 12px 12px 16px; text-align: center; box-shadow: 0 2px 0 var(--linha); display: grid; gap: 10px; justify-items: center; transition: transform .15s }
.cat:hover { transform: translateY(-3px) rotate(-.6deg) }
.cat .ft { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #fff; border: 6px solid #fff; box-shadow: 0 4px 12px rgb(60 30 10 / .18) }
.cat b { font: 800 24px var(--display); color: var(--cafe) }
.cat .confira { background: var(--marinho); color: #fff; font-size: 13px; font-weight: 600; padding: 4px 16px; border-radius: 999px }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px }
.card { background: var(--cartao); border: 1px solid var(--linha); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; text-align: left; padding: 0; transition: transform .15s, box-shadow .15s }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(60 30 10 / .12) }
.card .foto { aspect-ratio: 1; width: 100%; max-width: 100%; display: block; object-fit: contain; background: #fff }
.card .info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1 }
.card .nome { font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.card .rod { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding-top: 6px }
.preco { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cafe) }
.preco small { font-weight: 500; color: var(--cinza); font-size: 12px }
.pix { font-size: 12px; color: var(--ok) }
.selo { font-size: 12px; color: var(--cinza) }
.selo.fim { color: var(--alerta); font-weight: 600 }
.vazio { padding: 30px 0; color: var(--cinza) }

.visita { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; background: var(--cafe); color: #f6ead6; border-radius: 6px; padding: 28px; margin-top: 30px }
.visita h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1; color: #fff }
.visita h2 span { color: var(--queijo); display: block; font-style: italic }
.visita p { margin: 12px 0 0; max-width: 44ch }
.visita .end { margin-top: 16px; font-size: 14px; color: var(--queijo) }
.visita .polaroide { transform: rotate(-1.8deg) }

footer { margin-top: 44px; background: var(--cartao); border-top: 1px solid var(--linha) }
footer .wrap { padding-block: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; font-size: 14px; color: var(--cinza) }
footer b { color: var(--cafe); display: block; margin-bottom: 4px }

.fab { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 6; box-shadow: 0 6px 18px rgb(0 0 0 / .25) }
.fab .ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--queijo) }

.fundo { position: fixed; inset: 0; background: rgb(30 15 8 / .5); z-index: 20; display: flex; justify-content: flex-end }
.painel { background: var(--cartao); width: min(540px, 100%); height: 100%; overflow-y: auto; padding: calc(18px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) 20px; display: flex; flex-direction: column; gap: 14px; animation: entra .2s ease-out }
@keyframes entra { from { transform: translateX(30px); opacity: .6 } }
.topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px }
.painel h3 { font-size: 24px; color: var(--cafe) }
.fechar { border: 1px solid var(--linha); background: var(--papel); border-radius: 999px; width: 36px; height: 36px; flex: none; font-size: 18px }
.passos { display: flex; gap: 6px; font-size: 12px; color: var(--cinza); flex-wrap: wrap }
.passos span[data-on] { color: var(--cafe); font-weight: 700 }
.foto-g { width: 100%; max-height: 330px; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 6px }
.variacoes { display: flex; flex-wrap: wrap; gap: 8px }
.var { border: 1px solid var(--linha); background: var(--papel); border-radius: 8px; padding: 7px 11px; font-size: 14px }
.var[aria-pressed="true"] { border-color: var(--cafe); box-shadow: inset 0 0 0 1px var(--cafe); background: var(--cartao) }
.var[data-fim] { color: var(--cinza); text-decoration: line-through }
.linha-f { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.qtd { display: flex; border: 1px solid var(--linha); border-radius: 999px; overflow: hidden }
.qtd button { border: 0; background: var(--papel); width: 36px; height: 40px; font-size: 18px }
.qtd span { min-width: 34px; display: grid; place-items: center; font-variant-numeric: tabular-nums }
.desc { color: var(--cinza); font-size: 14px }
.nota { font-size: 12.5px; color: var(--cinza); background: var(--papel); border-radius: 8px; padding: 9px 11px }
.nota.sim { border-left: 3px solid var(--caramelo) }
.item { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; border-bottom: 1px solid var(--linha); padding-bottom: 10px }
.item img { width: 54px; height: 54px; object-fit: contain; background: #fff; border-radius: 4px }
.item .t { font-size: 14px; line-height: 1.3; min-width: 0 }
.item .t small { display: block; color: var(--cinza) }
.conta { display: grid; gap: 4px; font-variant-numeric: tabular-nums }
.conta div { display: flex; justify-content: space-between }
.conta .tot { font-weight: 700; font-size: 18px; color: var(--cafe); border-top: 1px solid var(--linha); padding-top: 6px }
.conta .desc-v { color: var(--ok) }
fieldset { border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; margin: 0; display: grid; gap: 8px }
legend { font-weight: 600; padding: 0 4px; color: var(--cafe) }
label.op { display: flex; gap: 8px; align-items: flex-start; font-size: 14px }
.campo { display: grid; gap: 4px; font-size: 14px }
.campo input, .campo select { border: 1px solid var(--linha); border-radius: 8px; padding: 9px 11px; background: var(--papel) }
.qr { display: grid; justify-items: center; gap: 8px; text-align: center }
.qr canvas { width: 200px; height: 200px; image-rendering: pixelated; border: 8px solid #fff; box-shadow: 0 0 0 1px var(--linha) }
.qr .demo { font: 700 12px var(--body); letter-spacing: .14em; color: var(--alerta) }
.etapas { list-style: none; margin: 0; padding: 0 }
.etapa { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding-bottom: 14px; position: relative }
.etapa::before { content: ""; position: absolute; left: 12px; top: 24px; bottom: 0; width: 2px; background: var(--linha) }
.etapa:last-child::before { display: none }
.bola { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linha); background: var(--cartao); display: grid; place-items: center; font-size: 13px; font-weight: 700 }
.etapa[data-s="feito"] .bola { background: var(--ok); border-color: var(--ok); color: #fff }
.etapa[data-s="agora"] .bola { border-color: var(--caramelo); color: var(--caramelo) }
.zap { margin-top: 6px; background: #e3f3dc; border-radius: 10px 10px 10px 2px; padding: 7px 10px; font-size: 13.5px; max-width: 40ch; color: #1b2e1f }
.zap small { display: block; color: #4d6b52; font-size: 11.5px }
.danfe { background: #fff; border: 1px dashed var(--cinza); padding: 14px; font: 12.5px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #222; position: relative; overflow: hidden }
.danfe::after { content: "SIMULAÇÃO · SEM VALOR FISCAL"; position: absolute; inset: 40% -20% auto; text-align: center; transform: rotate(-18deg); font: 800 22px var(--body); color: rgb(163 52 44 / .22); pointer-events: none }
.danfe .c { text-align: center }
.danfe hr { border: 0; border-top: 1px dashed #999 }
.danfe .l { display: flex; justify-content: space-between; gap: 8px }
.log { display: grid; gap: 6px; font-size: 13px }
.ev { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; background: var(--papel); border-radius: 6px; padding: 7px 9px }
.ev .d { font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; color: #fff; align-self: start }
.ev .t { color: var(--cinza); font-size: 11.5px; grid-column: 2 }
.d.g { background: #2f62b5 } .d.m { background: #3b4f9c } .d.e { background: var(--cafe) } .d.w { background: #2e7d4f } .d.c { background: var(--caramelo) }
pre.feed { background: #1f1a17; color: #f3e6cf; padding: 10px; border-radius: 6px; font-size: 12px; overflow-x: auto; margin: 0 }
.abas { display: flex; gap: 6px; flex-wrap: wrap }
.abas button { border: 1px solid var(--linha); background: var(--papel); border-radius: 999px; padding: 6px 12px; font-size: 13px }
.abas button[aria-pressed="true"] { background: var(--cafe); color: #fff; border-color: var(--cafe) }

@media (max-width: 820px) {
  .abre, .visita { grid-template-columns: 1fr }
  .abre .polaroide { max-width: 420px; justify-self: center }
  .vantagens .wrap, .cats { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 620px) {
  .cab { flex-wrap: wrap; gap: 8px }
  .busca { order: 3; flex-basis: 100% }
  .cab .pill { margin-left: auto }
  .marca img { width: 50px; height: 50px }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .menu button { letter-spacing: .08em; font-size: 12.5px; padding: 6px 6px }
  .visita { padding: 18px }
}

.erro { color: var(--alerta); font-size: 14px }
.status-loja { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--papel-2); color: var(--cafe) }
.carregando { padding: 40px 0; color: var(--cinza) }

/* WhatsApp sempre visivel */
.zap-fab { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 7; display: inline-flex; align-items: center; gap: 8px; background: #1f9d55; color: #fff; text-decoration: none; font-weight: 700; padding: 12px 18px 12px 14px; border-radius: 999px; box-shadow: 0 8px 22px rgb(0 0 0 / .28) }
.zap-fab svg, .zap-link svg { width: 24px; height: 24px; fill: currentColor; flex: none }
.zap-fab:hover { background: #18834a }
.fab { right: auto; left: max(16px, env(safe-area-inset-left, 0px)); padding: 8px 12px; font-size: 13px; opacity: .92 }
.zap-link { display: inline-flex; align-items: center; gap: 6px; color: #1f7a45; font-weight: 700; text-decoration: none; white-space: nowrap; flex: none }
.zap-link svg { width: 20px; height: 20px }
.zap-btn { background: #1f9d55; color: #fff }
.consent { position: fixed; inset: auto 0 0; z-index: 30; background: var(--cartao); border-top: 1px solid var(--linha); padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; font-size: 14px }
@media (max-width: 620px) { .zap-link span { display: none } .zap-fab span { display: none } .zap-fab { padding: 14px } }

/* Fachada: a placa da loja e as portas de vidro que se abrem para o interior */
.fachada { max-width: 1180px; margin: 22px auto 0; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.placa { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; background: linear-gradient(#8a5a36, #6e4528); border: 3px solid #4a2c18; border-radius: 6px 6px 0 0; padding: 10px 16px; box-shadow: inset 0 -10px 0 #2c2c2c, 0 6px 16px rgb(40 20 8 / .25); position: relative }
.placa::after { content: ""; position: absolute; inset: auto 8% -4px; height: 4px; background: repeating-linear-gradient(90deg, #ffd27a 0 6px, transparent 6px 46px); filter: blur(1px); opacity: .9 }
.placa-selo { width: clamp(56px, 9vw, 92px); height: auto; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .4)) }
.placa-txt { display: grid; gap: 6px; text-align: center; padding-bottom: 8px; min-width: 0 }
.placa-txt strong { font: 800 clamp(18px, 3.6vw, 40px)/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgb(0 0 0 / .35) }
.placa-txt span { font: 600 clamp(10px, 1.6vw, 15px)/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #f2ead9; background: #2c2c2c; justify-self: center; padding: 4px 12px; border-radius: 2px }
.bandeira { width: clamp(52px, 8vw, 96px); height: auto; border: 2px solid #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .35) }
.vitrine-loja { position: relative; overflow: hidden; aspect-ratio: 16 / 7; min-height: 340px; max-width: 100%; border-inline: 10px solid #5a3820; background: #2a1a10 }
.vitrine-loja .dentro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); filter: brightness(.55); transition: transform 1.6s ease, filter 1.6s ease }
.porta { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(115deg, rgb(255 255 255 / .28), rgb(255 255 255 / .06) 40%, rgb(255 255 255 / .18) 60%, rgb(255 255 255 / .04)); border: 10px solid #6b4426; box-shadow: inset 0 0 0 2px rgb(0 0 0 / .25); transition: transform 1.4s cubic-bezier(.6, .05, .25, 1); z-index: 2 }
.porta.esq { left: 0 } .porta.dir { right: 0 }
.aviso-porta { position: absolute; top: 18%; left: 50%; transform: translateX(-50%) rotate(-3deg); background: #fff; color: var(--alerta); font: 800 13px var(--body); letter-spacing: .2em; text-transform: uppercase; padding: 6px 12px; border: 2px solid var(--alerta); border-radius: 4px }
.puxador { position: absolute; left: 14px; top: 42%; width: 8px; height: 70px; border-radius: 6px; background: linear-gradient(#e8d2a8, #9c7b4a) }
.boas-vindas { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; gap: 12px; padding: 24px clamp(18px, 6vw, 70px); color: #fff; opacity: 0; transform: translateY(14px); transition: opacity .8s ease .9s, transform .8s ease .9s; z-index: 1 }
.boas-vindas .pre { font: 600 italic 24px var(--display); color: var(--queijo) }
.boas-vindas h1 { color: #fff; font-size: clamp(32px, 5.4vw, 64px); line-height: .98; max-width: 16ch; text-shadow: 0 3px 14px rgb(0 0 0 / .5) }
.boas-vindas h1 span { display: block; color: var(--queijo) }
.entrar { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; border: 0; background: var(--queijo); color: var(--cafe); font: 800 16px var(--body); padding: 12px 22px; border-radius: 999px; box-shadow: 0 6px 18px rgb(0 0 0 / .35); transition: opacity .4s }
.calcada { height: 16px; background: repeating-linear-gradient(90deg, #cfc6b8 0 38px, #bdb3a3 38px 40px); border-radius: 0 0 6px 6px }
.fachada.aberta .porta.esq { transform: translateX(-96%) }
.fachada.aberta .porta.dir { transform: translateX(96%) }
.fachada.aberta .dentro { transform: scale(1); filter: brightness(.62) }
.fachada.aberta .boas-vindas { opacity: 1; transform: none }
.fachada.aberta .entrar { opacity: 0; pointer-events: none }
@media (prefers-reduced-motion: reduce) { .porta, .dentro, .boas-vindas { transition: none !important } }
@media (max-width: 620px) {
  .placa { gap: 8px; padding: 8px 10px }
  .vitrine-loja { aspect-ratio: auto; min-height: 420px; border-inline-width: 6px }
  .placa-txt span { letter-spacing: .06em }
}

/* Identidade do selo: a fita "Cantin Empório Mineiro" (Almendra) e o anel em versaletes (Playfair Display SC) */
.marca .wordmark { font: 700 22px/1.05 var(--display); color: var(--cafe) }
.marca .wordmark small { font: 700 10px/1.6 var(--selo); letter-spacing: .12em; text-transform: none; color: var(--caramelo) }
.marca img { width: 64px; height: 64px }
.menu button, .placa-txt span, .tarja, .cat .confira { font-family: var(--selo) }
.placa-txt strong { font-family: var(--selo); font-weight: 900; letter-spacing: .04em }
@media (max-width: 620px) { .marca .wordmark { font-size: 17px } }

/* Categorias com carrossel de fotos reais */
.cat .roda { position: relative; display: block; width: 100%; aspect-ratio: 4/3; background: #fff; border: 6px solid #fff; box-shadow: 0 4px 12px rgb(60 30 10 / .18); overflow: hidden }
.cat .roda img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .8s ease }
.cat .roda img.on { opacity: 1 }
.cat .confira { background: var(--marinho); color: #fff; font-size: 13px; font-weight: 600; padding: 4px 16px; border-radius: 999px }

/* Banner de destaques escolhidos no ERP */
.destaques { position: relative; margin-top: 22px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 8px; overflow: hidden }
.slides { position: relative; min-height: 300px }
.slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 24px; padding: 20px 56px; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s }
.slide.on { opacity: 1; visibility: visible; position: relative }
.slide img { width: 100%; max-height: 280px; object-fit: contain; background: #fff }
.slide-txt { display: grid; gap: 10px; justify-items: start; min-width: 0 }
.slide-txt h2 { font-size: clamp(24px, 3.4vw, 38px); color: var(--cafe); line-height: 1.05 }
.slide-txt h2 small { display: block; font: 600 16px var(--body); color: var(--cinza) }
.slide-txt p { margin: 0; color: var(--cinza); max-width: 48ch }
.badge { background: var(--alerta); color: #fff; font: 700 12px var(--selo); letter-spacing: .1em; padding: 4px 10px; border-radius: 4px }
.seta { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linha); background: var(--cartao); font-size: 24px; line-height: 1; color: var(--cafe); z-index: 2 }
.seta.ant { left: 8px } .seta.prox { right: 8px }
.pontos { display: flex; gap: 8px; justify-content: center; padding-bottom: 12px }
.pontos button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--linha); padding: 0 }
.pontos button[aria-current="true"] { background: var(--cafe) }
@media (max-width: 620px) { .slide { grid-template-columns: 1fr; padding: 16px 44px; gap: 12px } .slide img { max-height: 200px } }
@media (prefers-reduced-motion: reduce) { .slide, .cat .roda img { transition: none } }

/* Nossa historia + avaliacoes do Google */
.historia { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; background: var(--cartao); border: 1px solid var(--linha); border-radius: 8px; padding: 26px }
.historia .pre { font: 700 italic 20px var(--display); color: var(--caramelo) }
.historia h2 { font-size: clamp(28px, 3.6vw, 42px); color: var(--cafe); margin: 4px 0 10px }
.historia p { margin: 0 0 10px; max-width: 62ch }
.avaliacoes { display: grid; gap: 10px; background: var(--papel); border-radius: 8px; padding: 16px }
.nota-google { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
.nota-google b { font: 800 36px var(--display); color: var(--cafe) }
.estrelas { color: #e0a400; letter-spacing: 2px }
.nota-google span:last-child { color: var(--cinza); font-size: 13px }
.avaliacoes blockquote { margin: 0; padding: 8px 12px; background: var(--cartao); border-left: 3px solid var(--caramelo); border-radius: 4px; font-size: 14px }
.avaliacoes cite { display: block; font-style: normal; color: var(--cinza); font-size: 12px; margin-top: 2px }
/* Receitas e harmonizacoes */
#receitas h2 { font-size: 30px; color: var(--cafe); display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 14px }
#receitas h2 small { font: 500 14px var(--body); color: var(--cinza) }
.receitas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px }
.receita { background: var(--cartao); border: 1px solid var(--linha); border-radius: 8px; padding: 16px; display: grid; gap: 8px; align-content: start }
.receita-topo { display: flex; justify-content: space-between; font-size: 12px; color: var(--cinza) }
.receita .tipo { font: 700 12px var(--selo); letter-spacing: .08em; color: var(--caramelo) }
.receita h3 { font-size: 22px; color: var(--cafe) }
.receita p { margin: 0; color: var(--cinza); font-size: 14px }
.receita ol { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px }
.usa { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--cinza) }
.chip-prod { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linha); background: var(--papel); border-radius: 999px; padding: 3px 10px 3px 3px; font-size: 12.5px }
.chip-prod img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #fff }
.menu .sep { color: var(--caramelo); padding: 0 4px }
@media (max-width: 820px) { .historia { grid-template-columns: 1fr; padding: 18px } }

/* Como chegar */
.rotas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px }
.rota svg { width: 18px; height: 18px; fill: currentColor }
.rota { background: var(--queijo); color: var(--cafe) }
.vant a, footer a { color: var(--marinho); font-weight: 600 }

/* Avaliacoes passando */
.giro { position: relative; min-height: 120px }
.giro blockquote { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; margin: 0; padding: 10px 12px; background: var(--cartao); border-left: 3px solid var(--caramelo); border-radius: 4px; font-size: 15px }
.giro blockquote.on { opacity: 1; position: relative }
.giro .estrelas { display: block; font-size: 13px; margin-bottom: 2px }
.temas { display: flex; flex-wrap: wrap; gap: 6px }
.temas span { background: var(--cartao); border: 1px solid var(--linha); border-radius: 999px; padding: 2px 10px; font-size: 12px; color: var(--cinza) }
.temas b { color: var(--cafe) }
@media (prefers-reduced-motion: reduce) { .giro blockquote { transition: none } }

/* ===== Casa: menu lateral de corredores + paginas ===== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
.casa { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
#conteudo { min-width: 0; padding-block: 18px 10px }
#conteudo .secao { padding-block: 22px 6px }
.corredores { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; padding-block: 18px; display: grid; gap: 14px }
.corredores-topo { display: flex; justify-content: space-between; align-items: center; font: 700 15px var(--selo); color: var(--cafe) }
.corredores-topo .fechar { display: none }
#nav-corredores { display: grid; gap: 2px }
#nav-corredores .nav-grupo { font: 700 11px var(--selo); letter-spacing: .14em; text-transform: uppercase; color: var(--caramelo); margin: 12px 0 4px 10px }
#nav-corredores a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--tinta); font-weight: 600 }
#nav-corredores a:hover { background: var(--cartao) }
#nav-corredores a[aria-current="page"] { background: var(--cafe); color: #fff }
#nav-corredores a small { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--cinza); background: var(--papel-2); border-radius: 999px; padding: 0 8px }
#nav-corredores a[aria-current="page"] small { background: rgb(255 255 255 / .2); color: #fff }
#nav-corredores .ic { width: 22px; text-align: center }
.corredores-pe { display: grid; gap: 6px; border-top: 1px dashed var(--linha); padding-top: 12px; font-size: 12.5px; color: var(--cinza) }
.corredores-pe .pill { justify-self: start }
.abre-corredores { display: none; border: 1px solid var(--linha); background: var(--cartao); border-radius: 999px; padding: 8px 12px; font-weight: 600; color: var(--cafe) }
.veu { position: fixed; inset: 0; background: rgb(30 15 8 / .45); z-index: 15 }
.fachada { margin: 0; padding: 0 }
.destaques { margin-top: 22px }
.cabeca-pagina { margin-bottom: 16px }
.cabeca-pagina .pre { font: 700 italic 20px var(--display); color: var(--caramelo) }
.cabeca-pagina h2 { font-size: clamp(28px, 3.6vw, 40px); color: var(--cafe) }
.cabeca-pagina p { color: var(--cinza); max-width: 60ch; margin: 6px 0 0 }
.porque { margin-top: 26px }
.porque h2 { font-size: 28px; color: var(--cafe); margin-bottom: 12px }
.porque-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.porque-grade div { background: var(--cartao); border: 1px solid var(--linha); border-top: 4px solid var(--caramelo); border-radius: 6px; padding: 14px; display: grid; gap: 6px; align-content: start }
.porque-grade b { font: 700 18px var(--display); color: var(--cafe) }
.porque-grade span { font-size: 14px; color: var(--cinza) }
.cats { grid-template-columns: repeat(3, minmax(0, 1fr)) }
a.cat { text-decoration: none; color: inherit }
.faixa-avaliacoes { max-width: 640px }
.produtores { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px }
.produtor { background: var(--cartao); border: 1px solid var(--linha); border-radius: 8px; padding: 16px; display: grid; gap: 10px; align-content: start }
.produtor-topo { display: flex; gap: 10px; align-items: flex-start }
.produtor h3 { font-size: 22px; color: var(--cafe) }
.produtor .cidade { font: 700 12px var(--selo); letter-spacing: .08em; color: var(--caramelo) }
.produtor p { margin: 0; font-size: 14px; color: var(--cinza) }
.produtor .pin { font-size: 22px }
[data-view="casa"] .visita { margin-top: 22px }
@media (max-width: 1000px) {
  .casa { grid-template-columns: minmax(0, 1fr) }
  .corredores { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); max-height: none; z-index: 16; background: var(--cartao); padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); transform: translateX(-105%); transition: transform .25s ease; box-shadow: 8px 0 24px rgb(0 0 0 / .2) }
  .corredores-abertos .corredores { transform: none }
  .corredores-topo .fechar { display: inline-block }
  .abre-corredores { display: inline-flex; gap: 6px; align-items: center }
  .porque-grade { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 620px) {
  .abre-corredores { order: -1 }
  .marca .wordmark small { display: none }
  .porque-grade { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) { .corredores { transition: none } }

/* Do tempo da vo */
.lembrancas { display: grid; gap: 16px }
.lembranca { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; align-items: center; background: var(--cartao); border: 1px solid var(--linha); border-radius: 8px; padding: 14px; position: relative }
.lembranca:nth-child(odd) { transform: rotate(-.4deg) } .lembranca:nth-child(even) { transform: rotate(.4deg) }
.lembranca > img { width: 160px; height: 140px; object-fit: contain; background: #fff; border: 6px solid #fff; box-shadow: 0 4px 12px rgb(60 30 10 / .18) }
.lembranca h3 { font-size: 24px; color: var(--cafe) }
.lembranca .lembra { margin: 4px 0 10px; font: italic 600 17px var(--display); color: var(--cafe-2) }
@media (max-width: 620px) { .lembranca { grid-template-columns: 1fr } .lembranca > img { width: 100%; height: 180px } }
@media (prefers-reduced-motion: reduce) { .lembranca { transform: none !important } }

/* Menu lateral: emporio gourmet rustico (sem emoji; tracos finos, versalete, filete na pagina ativa) */
.corredores { padding: 20px 6px 20px 0 }
.corredores-topo b { font: 700 14px var(--selo); letter-spacing: .1em; color: var(--cafe); border-bottom: 1px solid var(--caramelo); padding-bottom: 6px }
#nav-corredores .nav-grupo { font: 700 10.5px var(--selo); letter-spacing: .22em; color: var(--caramelo); margin: 16px 0 6px 12px; display: flex; align-items: center; gap: 8px }
#nav-corredores .nav-grupo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--linha), transparent) }
#nav-corredores a { gap: 12px; padding: 9px 12px; border-radius: 0 6px 6px 0; border-left: 2px solid transparent; font: 500 15px var(--body); letter-spacing: .01em; color: var(--tinta); transition: background .15s, border-color .15s, color .15s }
#nav-corredores a:hover { background: rgb(255 253 248 / .7); border-left-color: var(--linha) }
#nav-corredores a[aria-current="page"] { background: var(--cartao); color: var(--cafe); font-weight: 700; border-left-color: var(--caramelo); box-shadow: 0 1px 0 var(--linha) }
#nav-corredores .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--caramelo); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
#nav-corredores a[aria-current="page"] .ic { stroke: var(--cafe) }
#nav-corredores a small, #nav-corredores a[aria-current="page"] small { background: none; color: var(--cinza); font: 500 12px var(--body); font-variant-numeric: tabular-nums; padding: 0 }
.corredores-pe { border-top: 1px solid var(--linha) }
.corredores-pe .pill.rota { background: none; color: var(--cafe); border: 1px solid var(--caramelo); font-weight: 600 }
.corredores-pe .pill.rota:hover { background: var(--cartao) }
.produtor .pin .ic { width: 24px; height: 24px; fill: none; stroke: var(--caramelo); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
@media (prefers-reduced-motion: reduce) { #nav-corredores a { transition: none } }

/* ===== Foco na venda: provar com os olhos ===== */
.acolhe { margin: 16px 0 0; font: italic 600 19px var(--display); color: var(--cafe-2); text-align: center }
.card { position: relative }
.card-abrir { border: 0; background: none; padding: 0; text-align: left; display: flex; flex-direction: column; flex: 1; color: inherit }
.card .foto { object-fit: cover; transition: transform .35s ease }
.card:hover .foto { transform: scale(1.04) }
.card .info { padding: 10px 12px 4px }
.card .rod { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 12px 12px; margin-top: auto }
.card .preco { font-size: 16px }
.mini { border: 1px solid var(--caramelo); background: none; color: var(--cafe); border-radius: 999px; padding: 6px 12px; font: 600 13px var(--body); white-space: nowrap }
.mini.comprar { background: var(--cafe); border-color: var(--cafe); color: #fff }
.mini.comprar:hover { background: var(--cafe-2) }
.trilho { margin-top: 30px }
.trilho-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px }
.trilho-topo h2 { font-size: clamp(24px, 3vw, 32px); color: var(--cafe) }
.trilho-topo p { margin: 2px 0 0; color: var(--cinza); font-size: 14px }
.trilho-lista { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 230px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin }
.trilho-lista .card { scroll-snap-align: start }
.destaques { background: linear-gradient(120deg, #fffdf8, #f3e7cf) }
.slides { min-height: 360px }
.slide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) }
.slide img { max-height: 340px; object-fit: cover; border: 8px solid #fff; box-shadow: 0 10px 26px rgb(60 30 10 / .2); transform: rotate(-1.5deg) }
.preco.grande { font-size: 26px }
.casa-avaliacoes { margin-top: 18px }
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 40; background: var(--cafe); color: #fff; padding: 10px 16px; border-radius: 999px; box-shadow: 0 8px 20px rgb(0 0 0 / .25); font-size: 14px; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px) }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto }
.toast .link { background: none; border: 0; color: var(--queijo); font-weight: 700; text-decoration: underline; padding: 0 0 0 6px }
@media (max-width: 620px) { .trilho-lista { grid-auto-columns: 72% } .slide img { max-height: 240px } }
@media (prefers-reduced-motion: reduce) { .card .foto, .toast { transition: none } .card:hover .foto { transform: none } }

/* Fachada mais nitida e quente: foto sem escurecer, sombra so atras do texto, placa com veio de madeira e luz de loja */
.placa { background:
  repeating-linear-gradient(92deg, rgb(255 255 255 / .035) 0 2px, transparent 2px 9px, rgb(0 0 0 / .05) 9px 10px, transparent 10px 23px),
  linear-gradient(#94613b, #6b4226 70%, #5a361e); }
.placa::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% -30%, rgb(255 214 140 / .35), transparent 70%); pointer-events: none; border-radius: inherit }
.placa-txt strong { color: #fffaf0; text-shadow: 0 1px 0 rgb(0 0 0 / .45), 0 0 18px rgb(255 210 130 / .35) }
.placa-selo { background: #fff; border-radius: 50%; padding: 2px }
.vitrine-loja .dentro { filter: brightness(.9) saturate(1.05); image-rendering: auto }
.fachada.aberta .dentro { filter: brightness(1) saturate(1.08) }
.vitrine-loja::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(28 14 6 / .78) 0%, rgb(28 14 6 / .5) 38%, rgb(28 14 6 / .08) 62%, transparent 75%),
              radial-gradient(70% 60% at 75% 10%, rgb(255 205 120 / .18), transparent 70%) }
.boas-vindas { z-index: 1 }
.porta { z-index: 2 }
.boas-vindas h1 { text-shadow: 0 2px 18px rgb(0 0 0 / .55) }
@media (max-width: 620px) { .vitrine-loja::after { background: linear-gradient(0deg, rgb(28 14 6 / .8) 0%, rgb(28 14 6 / .45) 55%, rgb(28 14 6 / .15) 100%) } .boas-vindas { align-content: end; padding-bottom: 70px } }

/* Banner = vitrine da loja: o produto em destaque aparece no lado direito da fachada, passando sozinho */
.vitrine-loja .destaques { position: absolute; z-index: 1; top: 22px; right: 22px; bottom: 22px; width: min(40%, 420px); margin: 0; border: 0; border-radius: 6px;
  background: rgb(255 252 244 / .94); box-shadow: 0 14px 34px rgb(0 0 0 / .35); display: flex; flex-direction: column; opacity: 0; transform: translateX(16px); transition: opacity .7s ease 1.1s, transform .7s ease 1.1s }
.fachada.aberta .vitrine-loja .destaques { opacity: 1; transform: none }
.vitrine-loja .destaques .slides { flex: 1; min-height: 0 }
.vitrine-loja .slide { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 14px 16px 6px; gap: 10px; align-items: stretch }
.vitrine-loja .slide img { width: 100%; height: 100%; max-height: none; min-height: 0; object-fit: cover; transform: none; border-width: 5px }
.vitrine-loja .slide-txt { gap: 6px }
.vitrine-loja .slide-txt h2 { font-size: 22px }
.vitrine-loja .slide-txt p { display: none }
.vitrine-loja .preco.grande { font-size: 22px }
.vitrine-loja .seta { width: 32px; height: 32px; font-size: 20px; top: 40% }
.vitrine-loja .pontos { padding-bottom: 8px }
.vitrine-loja .boas-vindas { padding-right: calc(min(40%, 420px) + 40px) }
.vitrine-loja .boas-vindas h1 { font-size: clamp(30px, 3.8vw, 54px) }
.vitrine-loja { aspect-ratio: auto; min-height: 460px }
@media (max-width: 820px) {
  .vitrine-loja { display: flex; flex-direction: column; min-height: 0 }
  .vitrine-loja .boas-vindas { position: relative; padding: 28px 20px 30px; min-height: 300px; align-content: end }
  .vitrine-loja .destaques { position: relative; inset: auto; width: auto; margin: 0 10px 12px; height: 430px }
}
@media (prefers-reduced-motion: reduce) { .vitrine-loja .destaques { transition: none } }

.pagar-box { display: grid; gap: 6px; background: #fff7e3; border: 1px solid var(--queijo); border-radius: 8px; padding: 12px }
.pagar-box .pill { justify-self: start }

/* Slide de video (queijo cortado na hora) */
.slide-video video { width: 100%; height: 100%; min-height: 0; object-fit: cover; border: 5px solid #fff; box-shadow: 0 10px 26px rgb(60 30 10 / .2); background: #000 }
.vitrine-loja .slide-video video { height: 100% }
@media (prefers-reduced-motion: reduce) { .slide-video video { animation: none } }

/* Ajuste visual da entrada (30/10): card do destaque com foto + nome + preco + botao, fundo mais calmo atras do texto, bandeira legivel */
.vitrine-loja .destaques { top: 26px; bottom: 26px; right: 26px; width: min(36%, 380px); background: #fffdf8; border: 1px solid rgb(185 130 74 / .45); box-shadow: 0 18px 40px rgb(0 0 0 / .4) }
.vitrine-loja .destaques::before { content: "Destaque da casa"; position: absolute; top: -13px; left: 16px; z-index: 3; background: var(--cafe); color: var(--queijo); font: 700 11px var(--selo); letter-spacing: .14em; padding: 5px 12px; border-radius: 999px }
.vitrine-loja .slides { position: relative; flex: 1; min-height: 0 }
.vitrine-loja .slide, .vitrine-loja .slide.on { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 8px }
.vitrine-loja .slide > img, .vitrine-loja .slide > video { flex: 1 1 auto; min-height: 0; width: 100%; height: auto; object-fit: cover; border: 0; border-radius: 4px; box-shadow: none; transform: none }
.vitrine-loja .slide-txt { flex: none; gap: 4px }
.vitrine-loja .slide-txt h2 { font-size: 20px; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.vitrine-loja .slide-txt h2 small { font-size: 13px }
.vitrine-loja .slide-txt .linha-f { gap: 8px; justify-content: space-between; width: 100% }
.vitrine-loja .slide-txt .pill { padding: 8px 14px; font-size: 14px }
.vitrine-loja .badge { position: absolute; top: 26px; left: 24px; z-index: 2; box-shadow: 0 2px 8px rgb(0 0 0 / .25) }
.vitrine-loja .seta { top: 42% }
.vitrine-loja .dentro { filter: brightness(.95) saturate(1.05) blur(.4px) }
.fachada.aberta .dentro { filter: brightness(1) saturate(1.06) blur(.6px) }
.vitrine-loja::after { background:
  linear-gradient(90deg, rgb(24 12 5 / .9) 0%, rgb(24 12 5 / .72) 34%, rgb(24 12 5 / .3) 55%, rgb(24 12 5 / .12) 100%),
  radial-gradient(60% 50% at 70% 0%, rgb(255 205 120 / .16), transparent 70%) }
.boas-vindas .pre { font-size: 26px }
.boas-vindas h1 { letter-spacing: -.005em }
.bandeira { width: clamp(64px, 9vw, 112px); border: 3px solid #fff; border-radius: 2px }
@media (max-width: 820px) {
  .vitrine-loja .destaques { width: auto; height: 460px }
  .vitrine-loja::after { background: linear-gradient(0deg, rgb(24 12 5 / .9) 0%, rgb(24 12 5 / .5) 60%, rgb(24 12 5 / .2) 100%) }
}

.placa-txt strong { font-size: clamp(16px, 2.7vw, 38px); white-space: nowrap }
@media (max-width: 620px) { .placa-txt strong { white-space: normal } }
/* etiqueta "Destaque da casa" inteira (o card nao corta o que sai da borda) */
.vitrine-loja .destaques { overflow: visible }
.vitrine-loja .destaques::before { top: -12px; box-shadow: 0 2px 8px rgb(0 0 0 / .25) }
.vitrine-loja .slides { border-radius: 6px; overflow: hidden }

.lgpd .op { font-weight: 600 }
.campo small { font-weight: 400; color: var(--cinza) }

/* Avaliacoes em faixa corrida */
.giro.faixa { position: relative; min-height: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent) }
.faixa-trilho { display: flex; gap: 14px; width: max-content; animation: faixa calc(var(--itens) * 6s) linear infinite }
.faixa-copia { display: flex; gap: 14px }
.giro.faixa:hover .faixa-trilho { animation-play-state: paused }
.giro.faixa .aval { position: static; opacity: 1; width: 300px; flex: none; margin: 0; padding: 12px 14px; background: var(--cartao); border: 1px solid var(--linha); border-left: 3px solid var(--caramelo); border-radius: 6px; display: grid; gap: 6px; align-content: start; font-size: 14.5px }
.giro.faixa .aval cite { font-style: normal; color: var(--cinza); font-size: 12px }
@keyframes faixa { from { transform: translateX(0) } to { transform: translateX(calc(-50% - 7px)) } }
.faixa-avaliacoes { max-width: none }
@media (prefers-reduced-motion: reduce) { .faixa-trilho { animation: none } .giro.faixa { overflow-x: auto } .faixa-copia { display: none } }

@media (prefers-reduced-motion: reduce) { .giro.faixa { overflow-x: hidden } }