/* Pecas de amostra da vitrine — DUO Comercio.
   Quatro negocios ficticios, um por cartao de preco, cada um de um ramo.

   MEDIDAS EM PIXEL, e isso e deliberado. A primeira versao usava em com
   escala por container query, e quebrou por dois motivos: em em margin
   resolve contra o font-size do PROPRIO elemento (18px num titulo de 27px
   vira 486px), e abaixo de ~6px o navegador arredonda o tamanho do texto
   para cima, o conteudo estoura a altura travada pelo aspect-ratio e o
   flex-shrink esmaga as caixas de foto ate zero. Peca tem largura fixa
   (ver o fim deste arquivo); quem se adapta a tela e a fileira, que rola. */

.pc .foto, .pc .fundo, .pc .faixa { flex: none; }
.pc img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: none; }

/* ============ 1. CONDOMINIO — panfleto A4 frente e verso ============ */
.cond {
  aspect-ratio: 1 / 1.414; display: flex; flex-direction: column; overflow: hidden;
  font-family: "Source Sans 3", system-ui, sans-serif; color: #F2EFE6; background: #123A2E;
  box-shadow: 0 20px 44px -26px rgba(0,0,0,.55);
}
.cond .topo { padding: 16px 18px 0; display: flex; align-items: center; gap: 8px; }
.cond .topo i { width: 16px; height: 1px; background: #C9A227; display: block; flex: none; }
.cond .topo span { font-size: 7px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #C9A227; }
.cond .foto { margin: 12px 18px 0; height: 104px; overflow: hidden; flex: none; }
.cond h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 800; font-size: 27px;
  line-height: 1.03; margin: 14px 18px 0; letter-spacing: -.01em; }
.cond h3 em { font-style: italic; font-weight: 600; color: #C9A227; }
.cond .sub { margin: 9px 18px 0; font-size: 10px; line-height: 1.42; color: #B9CCC2; }
.cond .nome { margin: auto 18px 0; font-family: "Playfair Display", Georgia, serif; font-size: 16px;
  font-weight: 700; line-height: 1.1; }
.cond .cargo { margin: 2px 18px 0; font-family: "Playfair Display", Georgia, serif; font-style: italic;
  font-size: 10px; color: #C9A227; }
.cond .faixa { margin-top: 12px; background: #A6402C; padding: 9px 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cond .faixa b { font-family: "Playfair Display", Georgia, serif; font-size: 12.5px; font-weight: 700; }
.cond .faixa span { font-size: 8px; font-weight: 700; letter-spacing: .12em; }

.cond.verso { background: #F4F1E7; color: #1D2B25; }
.cond.verso .topo span { color: #7A6320; }
.cond.verso h3 { font-size: 21px; color: #123A2E; }
.cond.verso .sub { color: #4E5C55; }
/* A frente encosta a faixa no rodape porque .nome tem margin-top auto. O verso
   nao tem .nome, entao a faixa precisa do auto por conta propria — sem isto ela
   para no meio e sobra papel creme embaixo. */
.cond.verso .faixa { margin-top: auto; }
.cond .marcos { display: flex; gap: 6px; margin: 14px 18px 0; }
.cond .marcos > .marco { flex: 1 1 0; min-width: 0; }
/* Estes blocos ja se chamaram .selo, e o nome custou caro: o style.css tem um
   .selo solto (o balao "O mais pedido" do cartao de preco destacado) que e
   position:absolute, border-radius:100px, uppercase e white-space:nowrap. Fora
   do fluxo, os tres viravam uma fileira de altura zero — o bug de 06/09. Ele so
   aparecia na pagina, porque o artefato de pecas nao carrega o style.css.
   Resetar propriedade por propriedade nao resolve: a proxima regra que entrar
   no .selo quebra de novo. O nome e que tinha que sair. NAO renomeie de volta. */
.cond .marco { background: #fff; border: 1px solid #DFD8C6; padding: 7px 6px; text-align: center; }
.cond .marco b { display: block; font-family: "Playfair Display", Georgia, serif; font-size: 15px;
  color: #123A2E; line-height: 1; }
.cond .marco span { display: block; font-size: 6.5px; line-height: 1.25; color: #5E6B64; margin-top: 3px; }
.cond .duasfotos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 18px 0; }
.cond .duasfotos span { display: block; height: 56px; overflow: hidden; }
.cond .itens { margin: 12px 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
.cond .itens div { font-size: 7.5px; line-height: 1.3; color: #3A4842; padding-left: 9px; position: relative; }
.cond .itens div::before { content: ""; position: absolute; left: 0; top: 4px;
  width: 4px; height: 4px; border-radius: 50%; background: #C9A227; }
.cond .itens b { color: #A6402C; font-weight: 700; display: block; font-size: 8px; }

/* ============ 2. PETSHOP — panfleto + card ============ */
.pet { overflow: hidden; font-family: Nunito, system-ui, sans-serif;
  box-shadow: 0 20px 44px -26px rgba(0,0,0,.5); }
.pet.panf { aspect-ratio: 1 / 1.414; background: #0E4C5C;
  color: #F0FAFB; display: flex; flex-direction: column; border-radius: 10px; }
.pet.panf .marca { padding: 15px 16px 0; display: flex; align-items: center; gap: 7px; }
.pet.panf .marca i { width: 22px; height: 22px; border-radius: 7px; background: #FF7A59; flex: none; }
.pet.panf .marca b { font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; }
.pet.panf .foto { margin: 12px 16px 0; height: 110px; border-radius: 9px; overflow: hidden; flex: none; }
.pet.panf h3 { font-size: 22px; font-weight: 800; line-height: 1.06; margin: 13px 16px 0; letter-spacing: -.02em; }
.pet.panf h3 em { font-style: normal; color: #FFB39E; }
.pet.panf .txt { margin: 8px 16px 0; font-size: 9.5px; line-height: 1.45; color: #A8D2DB; }
.pet.panf .lista { margin: 11px 16px 0; display: flex; flex-direction: column; gap: 5px; }
.pet.panf .lista div { font-size: 8.5px; display: flex; gap: 6px; align-items: center; color: #DCF1F4; }
.pet.panf .lista i { width: 12px; height: 12px; border-radius: 50%; background: #FF7A59; flex: none;
  display: grid; place-items: center; font-size: 7px; color: #0E4C5C; font-weight: 800; font-style: normal; }
.pet.panf .cta { margin: auto 16px 16px; background: #FF7A59; border-radius: 100px; padding: 9px;
  text-align: center; color: #08323C; font-size: 10px; font-weight: 800; }

.pet.card { aspect-ratio: 4 / 5; background: #F6EFE7; color: #0E4C5C;
  display: flex; flex-direction: column; border-radius: 10px; }
.pet.card .foto { margin: 14px 14px 0; height: 118px; border-radius: 8px; overflow: hidden; flex: none; }
.pet.card .tag { margin: 12px 14px 0; font-size: 7px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: #FF7A59; }
.pet.card h4 { margin: 5px 14px 0; font-size: 17px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.pet.card .pe { margin: auto 14px 14px; font-size: 8.5px; font-weight: 700; color: #4C7A86; }

/* ============ 3. ACAI — carrossel de 5 cards ============
   A cor do acai e roxo profundo com magenta e verde-limao, em formas
   organicas. Referencia: identidade visual de acaiteria. */
.acai { aspect-ratio: 4 / 5; position: relative;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 9px;
  font-family: Nunito, system-ui, sans-serif; box-shadow: 0 16px 34px -20px rgba(46,16,53,.7); }
.acai .blob { position: absolute; border-radius: 50%; z-index: 0; }
.acai .b1 { width: 132px; height: 118px; left: -40px; top: -34px; }
.acai .b2 { width: 88px; height: 96px; right: -30px; bottom: 34px; }
.acai .dentro { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; }
.acai .n { position: absolute; top: 9px; right: 10px; z-index: 3; font-size: 7.5px;
  font-weight: 800; letter-spacing: .1em; opacity: .62; }
.acai .marca { padding: 10px 12px 0; font-size: 7px; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; opacity: .7; }
.acai h4 { margin: 7px 12px 0; font-size: 20px; font-weight: 800; line-height: 1.02; letter-spacing: -.025em; }
.acai h4 em { font-style: normal; }
.acai .txt { margin: 7px 12px 0; font-size: 8px; line-height: 1.4; opacity: .84; }
.acai .foto { margin: 8px 12px 0; flex: 1 1 60px; min-height: 40px; border-radius: 7px; overflow: hidden; }
.acai .pe { margin-top: auto; padding: 9px 12px; font-size: 7.5px; font-weight: 800;
  letter-spacing: .08em; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.acai .preco { margin: 6px 12px 0; font-size: 38px; font-weight: 800; line-height: .86; letter-spacing: -.045em; }
.acai .preco small { font-size: 14px; font-weight: 800; vertical-align: super; letter-spacing: 0; }
.acai .de { margin: 3px 12px 0; font-size: 8px; font-weight: 700; opacity: .6; text-decoration: line-through; }
.acai .sabores { margin: 9px 12px 0; display: flex; flex-wrap: wrap; gap: 4px; }
.acai .sabores span { font-size: 6.5px; font-weight: 800; padding: 3px 7px; border-radius: 100px;
  border: 1px solid currentColor; opacity: .85; }

.acai.p1 { background: #2E1035; color: #F6EFE4; }
.acai.p1 .b1 { background: #E5006D; opacity: .5; }
.acai.p1 .b2 { background: #8FD14F; opacity: .28; }
.acai.p1 .pe { background: rgba(0,0,0,.26); }
.acai.p2 { background: #F6EFE4; color: #2E1035; }
.acai.p2 .b1 { background: #E5006D; opacity: .15; }
.acai.p2 .b2 { background: #2E1035; opacity: .09; }
.acai.p2 .pe { background: #2E1035; color: #F6EFE4; }
.acai.p3 { background: #5B1E63; color: #F6EFE4; }
.acai.p3 .b1 { background: #8FD14F; opacity: .3; }
.acai.p3 .b2 { background: #E5006D; opacity: .4; }
.acai.p3 .pe { background: rgba(0,0,0,.26); }
.acai.p4 { background: #E5006D; color: #FFF2F7; }
.acai.p4 .b1 { background: #2E1035; opacity: .3; }
.acai.p4 .b2 { background: #8FD14F; opacity: .32; }
.acai.p4 .pe { background: rgba(46,16,53,.42); }
.acai.p5 { background: #2E1035; color: #8FD14F; }
.acai.p5 .b1 { background: #E5006D; opacity: .4; }
.acai.p5 .b2 { background: #8FD14F; opacity: .2; }
.acai.p5 .pe { background: #8FD14F; color: #2E1035; }

/* ============ 4. SALAO — arte avulsa e a variacao ============
   A foto e a peca; o texto entra por cima e fala de sensacao, nao de
   lista de servico. A variacao e outra composicao, nao a mesma invertida. */
.sal { aspect-ratio: 1 / 1; position: relative; display: flex;
  overflow: hidden; font-family: "Cormorant Garamond", Georgia, serif;
  box-shadow: 0 18px 38px -22px rgba(0,0,0,.5); }
.sal .rot { font-family: Montserrat, system-ui, sans-serif; font-size: 6.5px; font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase; }
.sal h4 { font-weight: 600; line-height: 1; letter-spacing: -.015em; margin: 0; }
.sal h4 em { font-style: italic; font-weight: 400; }
.sal .pe { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border-top: 1px solid currentColor; padding-top: 7px; }
.sal .pe span, .sal .pe b { font-family: Montserrat, system-ui, sans-serif; font-size: 6.5px;
  letter-spacing: .18em; text-transform: uppercase; }
.sal .pe span { font-weight: 600; opacity: .78; }
.sal .pe b { font-weight: 700; }

.sal.a { color: #FBF6F1; background: #2A211C; }
.sal.a .fundo { position: absolute; inset: 0; }
.sal.a .veu { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(176deg, rgba(30,20,16,.34) 0%, rgba(30,20,16,.1) 26%,
    rgba(30,20,16,.66) 60%, rgba(30,20,16,.95) 100%); }
.sal.a .dentro { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column;
  padding: 15px 16px; }
.sal.a h4 { margin: auto 0 10px; font-size: 30px; }
.sal.a .rot { opacity: .88; }

.sal.b { background: #4A302A; color: #F2E4D8; }
.sal.b .painel { width: 57%; display: flex; flex-direction: column; padding: 15px 14px; flex: none; }
.sal.b .faixa { width: 43%; position: relative; flex: none; }
.sal.b h4 { margin: auto 0 0; font-size: 25px; }
.sal.b .pe { margin-top: 11px; }
.sal.b .rot { color: #D9A88C; }

/* Largura FIXA por tipo, igual a largura de projeto.
   Abaixo dela a peca quebra: com font-size na casa de 0,8px o navegador
   arredonda o tamanho do texto para cima, o conteudo estoura a altura
   travada pelo aspect-ratio e o flex-shrink esmaga as caixas de foto ate
   zero. Por isso a peca nao encolhe — quem rola e a fileira. */
.pc.w-cond { width: 300px; }
.pc.w-panf { width: 240px; }
.pc.w-card { width: 180px; }
.pc.w-acai { width: 155px; }
.pc.w-sal  { width: 222px; }

/* Nenhum filho direto de peca pode ser esmagado pelo flex-shrink: com a
   altura travada pelo aspect-ratio, o navegador encolhe o que puder e some
   com blocos inteiros (foi o que aconteceu com os marcos do verso). */
.cond > *, .pet > *, .acai .dentro > * { flex: none; }
.acai .dentro > .foto { flex: 1 1 auto; min-height: 0; }