/* ============================================================================
   §PLANOS — 5 cards de preço + notas. Prefixo .s07-
   COR: o vermelho da marca é cromo aqui (botão do destaque, borda e selo do
   Traction). Nunca é dado, nunca é aviso. Texto vermelho só pela rampa
   600/700 (o #FF2A0D puro reprova no WCAG para texto: 3,76:1).
   DESTAQUE: selo com TEXTO + borda + elevação — não depende só de cor.
   LARGURA: flex com base em rem, então o número de colunas cai sozinho
   (5 → 3 → 2 → 1) sem media query, e a última linha centraliza.
   ========================================================================== */

.s07-planos { background: var(--enviquo-canvas); }

/* ——— grade ——— */
.s07-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-block-start: var(--space-12);
}

.s07-item {
  display: flex;             /* o card estica até a altura da linha */
  flex: 1 1 18rem;   /* card mais largo: o conteúdo respira (feedback 27/07).
     A base muda por faixa logo abaixo para o número de colunas nunca cair em
     4+1 (o Max sozinho na segunda linha quebra a comparação dos planos). */
  max-inline-size: 26rem;
  min-inline-size: 0;
}

/* ——— card ——— */
.s07-card {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  padding: var(--space-6);
  background: var(--enviquo-paper);
  border: 2px solid var(--gray-200);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

/* destaque: borda Signal (cromo, não texto) + elevação + selo */
.s07-card-destaque {
  border: 2px solid var(--enviquo-signal);
  box-shadow: 0 18px 44px rgba(10, 10, 10, 0.14);
}

.s07-selo {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  padding: 0.375rem 0.875rem;
  background: var(--signal-600);   /* texto branco sobre 600 = norma do manual */
  color: var(--enviquo-paper);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .s07-card {
    transition: border-color 200ms, box-shadow 200ms;
  }

  .s07-selo {
    transition: background-color 200ms, color 200ms;
  }

  .s07-grid:hover .s07-item-destaque .s07-card-destaque {
    border-color: var(--gray-300);
  }

  .s07-grid:hover .s07-item-destaque .s07-selo {
    background-color: var(--gray-300);
    color: var(--gray-900);
  }

  .s07-grid .s07-item:hover .s07-card {
    border-color: var(--enviquo-signal);
    box-shadow: 0 18px 44px rgba(10, 10, 10, 0.14);
  }

  .s07-grid:hover .s07-item-destaque:hover .s07-card-destaque {
    border-color: var(--enviquo-signal);
  }

  .s07-grid:hover .s07-item-destaque:hover .s07-selo {
    background-color: var(--signal-600);
    color: var(--enviquo-paper);
  }
}

/* ——— cabeçalho do card ——— */
.s07-head { padding-block-end: var(--space-4); }

.s07-nome {
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.s07-para {
  margin-block-start: var(--space-2);
  min-block-size: 3.2em;            /* alinha o preço entre cards vizinhos */
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gray-600);
}

.s07-preco {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-block-start: var(--space-3);
}

.s07-valor {
  font-weight: 700;
  font-size: clamp(2rem, 1.7rem + 1.1vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--gray-900);
}

.s07-mes {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-600);
}

/* ——— métricas (dado técnico: mono, tabular) ——— */
.s07-metricas {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--gray-200);
  border-block-end: 1px solid var(--gray-200);
}

.s07-metricas li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;      /* era 12px: ilegível no card (feedback 27/07) */
  line-height: 1.45;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--gray-700);
}

.s07-metricas b {
  font-weight: 500;
  color: var(--gray-900);
}

.s07-metricas svg {
  flex: none;
  color: var(--gray-900);
}

/* ——— recursos ——— */
.s07-heranca {
  margin-block-start: var(--space-4);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gray-700);
}

.s07-recursos {
  display: grid;
  gap: 0.625rem;
  margin-block-start: var(--space-3);
  margin-block-end: var(--space-6);
}

.s07-recursos li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.625rem;
  align-items: start;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--gray-700);
}

/* check em Ink: o vermelho aqui seria dado, e dado vermelho é proibido */
.s07-check {
  margin-block-start: 0.2em;
  color: var(--gray-900);
}

/* ——— botão ——— */
.s07-btn {
  inline-size: 100%;
  margin-block-start: auto;         /* cola no fim: botões alinhados na linha */
}

/* neutro: só o card destaque leva vermelho (1 vermelho por viewport) */
.s07-btn-neutro {
  background: var(--enviquo-paper);
  color: var(--gray-900);
  border-color: var(--gray-300);
}

.s07-btn-neutro:hover {
  background: var(--enviquo-ink);
  color: var(--enviquo-paper);
  border-color: var(--enviquo-ink);
}

/* ——— notas de apoio ——— */
.s07-notas {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--gray-200);
}

.s07-notas li {
  display: grid;
  grid-template-columns: 1.125rem 1fr;
  gap: 0.75rem;
  align-items: start;
  max-inline-size: 70ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--gray-600);
}

.s07-notas svg {
  margin-block-start: 0.2em;
  color: var(--gray-700);
}

.s07-notas b {
  font-weight: 600;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
  .s07-notas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-8);
  }
}

/* ——— número de colunas por faixa ———
   Com fonte e card maiores (27/07) a quebra natural do flex passou a dar 4+1
   entre 1300 e 1900px, deixando o Max órfão na segunda linha. A base do flex
   é o que decide onde quebra, então ela muda por faixa:
   1 coluna <640 · 2 até 1023 · 3 de 1024 a 1499 · 5 a partir de 1500.
   Medido: em 1500 os 5 cards ocupam 1350px de um container de 1410. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .s07-item { flex-basis: 17rem; }
}

@media (min-width: 1280px) and (max-width: 1499px) {
  .s07-item { flex-basis: 20rem; }
}

@media (min-width: 1500px) {
  .s07-item { flex-basis: 14.5rem; }
}

/* ——— destaque sobe um degrau no desktop (hierarquia por elevação) ——— */
@media (min-width: 1500px) {
  .s07-item-destaque { margin-block: -0.75rem; }
}

/* movimento reduzido: nada aqui anima por conta própria; o reveal .rv da
   fundação já respeita a preferência. Mantido explícito para auditoria. */
@media (prefers-reduced-motion: reduce) {
  .s07-card,
  .s07-selo { transition: none; }
}