/* ============================================================
   PREÇOS — a etiqueta de preço (só a /landing-page usa)

   Seção grafite, e a escolha tem uma razão de ritmo: o miolo da página é
   papel do começo ao fim depois do vazamento, e esta entra entre os
   projetos e o "quem faz", que eram duas seções claras coladas. Ela
   também é a segunda e última seção escura, nunca encostada na primeira.

   ---------- de folha de orçamento a etiqueta (11/09/2026) ----------
   Até aqui a seção era uma conta de três linhas (landing, site, loja),
   com o valor alinhado à direita como num orçamento. Com um preço só a
   lista não tem o que comparar, e o objeto certo passa a ser a ETIQUETA
   DE PREÇO que a /vitrine-digital pendura no hero dela: um retângulo de
   papel com filete de tinta sobre o grafite, o número em corpo de
   manchete, o que está incluso com o ✓ na margem e a ação no pé.

   A sombra dura é esmeralda viva, e não tinta: sobre grafite a sombra de
   tinta some, e o esmeralda vivo é o único dos três verdes que existe
   sobre escuro. É o único objeto com sombra nesta seção, e é a mesma
   regra do cartão do hero: sombra dura quer dizer "isto é uma coisa, e
   dá para apertar". A etiqueta inteira é o link.
   ============================================================ */
.precos.dark{background:var(--ink);color:var(--paper)}
.precos.dark .section-label{color:#9BA6A0}
.precos.dark .section-label::before{background:var(--green-live)}
.pr__label{margin-bottom:clamp(20px,3vw,28px)}
.pr__head{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,6.2vw,3.5rem);line-height:.98;letter-spacing:-.03em;
  color:var(--paper);max-width:20ch;
}
.pr__intro{
  margin-top:16px;max-width:52ch;
  font-size:clamp(1rem,3.8vw,1.15rem);line-height:1.55;color:#C9CDC6;
}

/* ---------- a etiqueta ----------
   Grade de duas colunas no desktop: o rótulo, o escopo e o incluso à
   esquerda; o número sozinho à direita, alinhado ao topo, como o preço
   fica numa etiqueta de verdade. `display:grid` num `<a>` é o que
   permite o link envolver tudo sem um botão dentro de outro. */
.pr__etiqueta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "tipo    valor"
    "escopo  valor"
    "incluso incluso"
    "entrada entrada"
    "acao    acao";
  column-gap:clamp(24px,4vw,56px);row-gap:12px;align-items:start;
  max-width:820px;
  margin-top:clamp(32px,4.6vw,52px);
  padding:clamp(22px,3.4vw,36px);
  background:#FBF9F3;color:var(--ink);
  border:1.5px solid var(--ink);
  box-shadow:8px 8px 0 var(--green-live);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s cubic-bezier(.2,.7,.2,1);
}
.et__tipo{
  grid-area:tipo;padding-top:.4em;
  font-family:var(--font-mono);font-weight:700;
  font-size:11px;letter-spacing:.18em;color:var(--green-dark);
}
.et__valor{
  grid-area:valor;justify-self:end;
  font-family:var(--font-display);font-weight:800;
  font-variant-numeric:tabular-nums;
  font-size:clamp(2.6rem,6vw,4.2rem);line-height:.86;letter-spacing:-.035em;
  color:var(--ink);
}
.et__escopo{
  grid-area:escopo;max-width:44ch;
  font-size:clamp(.95rem,3.6vw,1.05rem);line-height:1.5;color:var(--ink-soft);
}
/* O incluso é um inventário: filete em cima fechando o bloco do preço,
   duas colunas quando cabe, e o ✓ na margem em mono, que é o sinal da
   casa para "isto vem junto" (o /portfolio e a vitrine usam o mesmo). */
.et__incluso{
  grid-area:incluso;list-style:none;margin:6px 0 0;padding:16px 0 0;
  border-top:1px solid var(--linha);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:9px 28px;
}
.et__incluso li{
  position:relative;padding-left:22px;
  font-size:.95rem;line-height:1.45;color:var(--ink);
}
.et__incluso li::before{
  content:"✓";position:absolute;left:0;top:0;
  font-family:var(--font-mono);font-weight:700;color:var(--green-dark);
}
.et__entrada{
  grid-area:entrada;margin-top:6px;
  font-size:clamp(1rem,3.8vw,1.1rem);line-height:1.5;color:var(--ink);
}
.et__entrada b{color:var(--green-dark);font-weight:700}
/* A ação é visível sempre, também no desktop: com um objeto só não há
   o que descobrir no hover, e o link precisa dizer o que faz. */
.et__acao{
  grid-area:acao;margin-top:4px;
  font-family:var(--font-mono);font-weight:700;font-size:10.5px;letter-spacing:.16em;
  color:var(--ink);
}
.et__acao .arrow{margin-left:4px;display:inline-block;transition:transform .2s}
@media(hover:hover) and (pointer:fine){
  .pr__etiqueta:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--green-live)}
  .pr__etiqueta:hover .et__acao .arrow{transform:translateX(3px)}
}
.pr__etiqueta:active{transform:translate(4px,4px);box-shadow:4px 4px 0 var(--green-live)}
.pr__etiqueta:focus-visible{outline:2px solid var(--green-live);outline-offset:4px}
@media(prefers-reduced-motion:reduce){
  .pr__etiqueta,.et__acao .arrow{transition:none}
}
/* Celular: o número fica ao lado do rótulo na primeira linha, e o escopo
   desce inteiro, sem coluna. O incluso vira uma coluna só. */
@media(max-width:560px){
  .pr__etiqueta{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "tipo    valor"
      "escopo  escopo"
      "incluso incluso"
      "entrada entrada"
      "acao    acao";
    align-items:center;row-gap:12px;
    box-shadow:6px 6px 0 var(--green-live);
  }
  .et__tipo{padding-top:0}
  .et__valor{font-size:clamp(2.1rem,10vw,2.8rem)}
  .et__escopo{max-width:none}
  .et__incluso{grid-template-columns:1fr}
}

.pr__nota{
  margin-top:clamp(18px,2.6vw,24px);max-width:54ch;
  font-size:.875rem;line-height:1.5;color:#9BA6A0;
}