/*
 * Utilitários que o CSS de produção não tem (v2.1, D55, §16.4): as classes do
 * quadro de 2 colunas da escolha por plataforma (A2), escritas à mão no formato
 * que a produção compila (o seletor escapado igual, o aria- no próprio seletor, o
 * @media (min-width:64rem) do lg), dentro de @layer utilities. Sai depois do
 * utilitarios.css (setup.php), então as variantes daqui ganham das classes de
 * base de lá (flex → lg:flex-col, border-b → lg:border-b-0, p-3 → lg:p-4,
 * overflow-x-auto → lg:overflow-visible). Um comentário por regra; a lista é a do
 * Torno conferida pelo Pedrao (.maestri/logs/A2-classes.txt, 371bd94).
 */
@layer utilities {
/* escolha-por-plataforma: a categoria escolhida (aria-pressed) em Realce Anotação. */
.aria-pressed\:bg-accent[aria-pressed=true] {background-color:var(--accent)}
/* escolha-por-plataforma: a categoria escolhida em semibold. */
.aria-pressed\:font-semibold[aria-pressed=true] {--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
/* escolha-por-plataforma: a categoria escolhida no texto principal. */
.aria-pressed\:text-foreground[aria-pressed=true] {color:var(--foreground)}
@media (min-width:64rem) {
/* escolha-por-plataforma: o quadro vira grade no lg. */
.lg\:grid {display:grid}
/* escolha-por-plataforma: as 2 colunas do quadro (a das categorias com 16rem). */
.lg\:grid-cols-\[16rem_minmax\(0\,1fr\)\] {grid-template-columns:16rem minmax(0,1fr)}
/* escolha-por-plataforma: as categorias em coluna no lg (no celular, uma linha rolável). */
.lg\:flex-col {flex-direction:column}
/* escolha-por-plataforma: a coluna das categorias sem a rolagem horizontal do celular. */
.lg\:overflow-visible {overflow:visible}
/* escolha-por-plataforma: a divisória entre as 2 colunas. */
.lg\:border-r {border-right-style:var(--tw-border-style);border-right-width:1px}
/* escolha-por-plataforma: sem a divisória de baixo do celular. */
.lg\:border-b-0 {border-bottom-style:var(--tw-border-style);border-bottom-width:0}
/* escolha-por-plataforma: o respiro da coluna das categorias no lg. */
.lg\:p-4 {padding:calc(var(--spacing) * 4)}
}
}
/*
 * As classes do catálogo de agentes (blocks/modelo-* e o comum.php deles) que nem
 * o CSS de produção tem: compiladas pelo Tailwind e pelo marca.css da produção
 * com o ferramentas/compilar-utilitarios.mjs (ver README), sem edição à mão. Para
 * acrescentar uma classe, rode a ferramenta com a lista toda (a desta linha mais
 * a nova) e troque o bloco inteiro.
 *
 * group-hover:border-border-strong border-dashed -bottom-2 sm:bottom-3 divide-x lg:flex-1 lg:flex-row lg:gap-12 gap-y-3 sm:grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 lg:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] sm:h-18 lg:items-start lg:justify-center sm:max-w-[70%] min-h-44 sm:min-h-60 lg:mt-16 pl-14 pr-5 pt-1 -right-2 sm:right-3 group-hover:scale-105 group-hover:shadow-sm size-1.5 size-24 sm:size-24 sm:size-32 [&_svg]:size-full [&_strong]:text-foreground w-28 sm:w-36 lg:w-80
 */
@layer utilities {
.-right-2 {right:calc(var(--spacing) * -2)}
.-bottom-2 {bottom:calc(var(--spacing) * -2)}
.size-1\.5 {width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}
.size-24 {width:calc(var(--spacing) * 24);height:calc(var(--spacing) * 24)}
.min-h-44 {min-height:calc(var(--spacing) * 44)}
.w-28 {width:calc(var(--spacing) * 28)}
.grid-cols-1 {grid-template-columns:repeat(1,minmax(0,1fr))}
.gap-y-3 {row-gap:calc(var(--spacing) * 3)}
:where(.divide-x>:not(:last-child)) {--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}
.border-dashed {--tw-border-style:dashed;border-style:dashed}
.pt-1 {padding-top:calc(var(--spacing) * 1)}
.pr-5 {padding-right:calc(var(--spacing) * 5)}
.pl-14 {padding-left:calc(var(--spacing) * 14)}
@media (hover:hover) {
.group-hover\:scale-105:is(:where(.group):hover *) {--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}
.group-hover\:border-border-strong:is(:where(.group):hover *) {border-color:#9ca3af}
.group-hover\:shadow-sm:is(:where(.group):hover *) {--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
}
@media (min-width:40rem) {
.sm\:right-3 {right:calc(var(--spacing) * 3)}
.sm\:bottom-3 {bottom:calc(var(--spacing) * 3)}
.sm\:grid {display:grid}
.sm\:size-24 {width:calc(var(--spacing) * 24);height:calc(var(--spacing) * 24)}
.sm\:size-32 {width:calc(var(--spacing) * 32);height:calc(var(--spacing) * 32)}
.sm\:h-18 {height:calc(var(--spacing) * 18)}
.sm\:min-h-60 {min-height:calc(var(--spacing) * 60)}
.sm\:w-36 {width:calc(var(--spacing) * 36)}
.sm\:max-w-\[70\%\] {max-width:70%}
.sm\:grid-cols-2 {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:64rem) {
.lg\:mt-16 {margin-top:calc(var(--spacing) * 16)}
.lg\:w-80 {width:calc(var(--spacing) * 80)}
.lg\:flex-1 {flex:1}
.lg\:grid-cols-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
.lg\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,3fr\)\] {grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.lg\:flex-row {flex-direction:row}
.lg\:items-start {align-items:flex-start}
.lg\:justify-center {justify-content:center}
.lg\:gap-12 {gap:calc(var(--spacing) * 12)}
}
.\[\&_strong\]\:text-foreground strong {color:var(--foreground)}
.\[\&_svg\]\:size-full svg {width:100%;height:100%}
}
/*
 * As classes do /precos (templates/page-precos.html e blocks/precos-*) que nem o
 * CSS de produção tem, compiladas como as do catálogo, acima.
 *
 * lg:grid-rows-[auto_1fr]
 */
@layer utilities {
@media (min-width:64rem) {
.lg\:grid-rows-\[auto_1fr\] {grid-template-rows:auto 1fr}
}
}