/* Estilos dos modelos de exemplo (páginas /modelos/ e prévia ao vivo). */
.mdl {
  --m-fonte: "Figtree", system-ui, sans-serif;
  background: var(--m-fundo);
  color: var(--m-tinta);
  font-family: var(--m-fonte);
  container-type: inline-size;
  min-height: 100%;
}
.mdl * { box-sizing: border-box; margin: 0; }
.mdl-topo {
  display: flex; align-items: center; gap: 24px;
  padding: 20px 5cqi;
}
.mdl-marca { overflow-wrap: anywhere; min-width: 0; font-weight: 700; font-size: clamp(16px, 1.6cqi, 22px); letter-spacing: -0.02em; }
.mdl-links { display: flex; gap: 24px; margin-left: auto; font-size: 15px; font-weight: 600; }
.mdl-botao {
  display: inline-block; background: var(--m-destaque); color: #fff;
  font-weight: 700; font-size: clamp(15px, 1.25cqi, 18px);
  padding: 0.9em 1.4em; border-radius: 999px; white-space: nowrap;
}
.mdl-botao--pequeno { font-size: 14px; padding: 0.7em 1.1em; }
.mdl-hero { padding: 6cqi 5cqi 7cqi; display: grid; grid-template-columns: 1.55fr 1fr; gap: 5cqi; align-items: center; }
.mdl-pedido {
  background: var(--m-claro); color: var(--m-tinta);
  border-radius: 20px; padding: 2.4cqi; display: grid; gap: 10px;
}
.mdl-pedido-titulo { font-weight: 700; font-size: clamp(18px, 1.7cqi, 26px); letter-spacing: -0.02em; margin-bottom: 6px; }
.mdl-opcao {
  display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px;
  background: var(--m-fundo); border-radius: 12px; padding: 14px 16px;
}
.mdl-opcao i { box-sizing: border-box; width: 18px; height: 18px; border-radius: 6px; background: var(--m-claro); border: 2px solid var(--m-tinta); flex: none; } /* caixa de seleção real */
.mdl-opcao--on i { background: var(--m-destaque); border-color: var(--m-destaque); }
.mdl-campo-falso { font-size: 16px; padding: 14px 16px; border-radius: 12px; background: var(--m-fundo); opacity: 0.75; }
.mdl-botao--cheio { text-align: center; margin-top: 6px; }
.mdl-nicho { font-weight: 600; font-size: 16px; color: var(--m-destaque); margin-bottom: 1.2cqi; }
.mdl-titulo {
  font-weight: 700; letter-spacing: -0.035em; line-height: 0.95;
  font-size: clamp(40px, 6cqi, 92px); max-width: 12ch; overflow-wrap: break-word;
}
.mdl-apoio { font-size: clamp(17px, 1.6cqi, 22px); line-height: 1.45; max-width: 46ch; margin: 2.4cqi 0 3.2cqi; font-weight: 400; }
.mdl-servicos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  background: var(--m-campo); color: var(--m-campo-tinta);
  padding: 5cqi;
}
.mdl-servico { padding: 1.6cqi 2cqi 1.6cqi 0; }
.mdl-servico :is(h2, h4) { font-size: clamp(18px, 1.9cqi, 28px); letter-spacing: -0.02em; margin-bottom: 0.5em; }
.mdl-servico p { font-size: 16px; line-height: 1.45; max-width: 26ch; }
.mdl-horario { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; padding: 5cqi; align-items: start; }
.mdl-horario :is(h2, h4) { font-size: clamp(24px, 3cqi, 44px); letter-spacing: -0.03em; }
.mdl-horario dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: 17px; }
.mdl-horario dt { font-weight: 600; }
.mdl-rodape { overflow-wrap: anywhere; display: flex; justify-content: space-between; gap: 16px; padding: 24px 5cqi 32px; font-size: 14px; font-weight: 600; flex-wrap: wrap; }

/* produtos usados e avaliações */
.mdl-marcas { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; padding: 3.2cqi 5cqi; border-bottom: 1px solid color-mix(in srgb, var(--m-tinta) 14%, transparent); }
.mdl-rotulo { font-weight: 700; font-size: 15px; color: var(--m-destaque); }
.mdl-marcas ul { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 0; list-style: none; }
.mdl-marcas li { font-weight: 700; font-size: clamp(17px, 1.7cqi, 24px); letter-spacing: -0.02em; }
.mdl-avaliacoes { padding: 6cqi 5cqi; }
.mdl-avaliacoes-titulo { font-size: clamp(24px, 3cqi, 44px); letter-spacing: -0.03em; margin-bottom: 3cqi; }
.mdl-avaliacoes-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mdl-avaliacao { background: var(--m-claro); border-radius: 18px; padding: 24px; display: grid; gap: 14px; align-content: start; }
.mdl-estrelas { color: var(--m-destaque); letter-spacing: 3px; font-size: 18px; }
.mdl-avaliacao blockquote { font-size: 17px; line-height: 1.5; }
.mdl-avaliacao figcaption { font-weight: 700; font-size: 15px; }

@container (max-width: 700px) {
  .mdl-marcas { padding: 24px 16px; }
  .mdl-avaliacoes { padding: 40px 16px; }
  .mdl-avaliacoes-lista { grid-template-columns: 1fr; }
  .mdl-avaliacoes-titulo { margin-bottom: 20px; }
  .mdl-links { display: none; }
  .mdl-topo { padding: 16px; gap: 12px; justify-content: space-between; }
  .mdl-hero { padding: 40px 16px 48px; grid-template-columns: 1fr; gap: 40px; }
  .mdl-pedido { padding: 20px; }
  .mdl-titulo { font-size: clamp(38px, 12cqi, 64px); }
  .mdl-apoio { margin: 20px 0 28px; }
  .mdl-servicos { grid-template-columns: 1fr 1fr; padding: 32px 16px; gap: 8px 16px; }
  .mdl-servico { padding: 12px 0; }
  .mdl-horario { grid-template-columns: 1fr; padding: 40px 16px; }
  .mdl-rodape { padding: 20px 16px 28px; }
}