/* =============================================================================
   Ajustes de 25/09/2026 — logos dos apps e grade de planos
   Carregado depois do CSS do build (Tailwind). O Tailwind so gera classes que
   existiam no codigo na hora do build; tudo que e novo mora aqui, usando os
   tokens do tema (--color-*, --font-*, --ease-out-expo).
   ========================================================================== */

/* ----- Logos de apps ---------------------------------------------------------
   Todo logo vira um "icone de app": quadrado, cantos de 22%, sem moldura.
   - proprio: a arte ja e um cartao colorido; aparece sozinha, sem plaquinha,
     sem copia borrada atras e sem anel (era isso que criava o halo/borda dupla).
   - claro: logo feito para fundo claro (texto escuro). Sem um fundo branco ele
     some no azul-marinho do site, entao ganha um azulejo branco do mesmo
     formato, com pouco respiro para o logo ficar grande. */
.mgm-logo {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  border-radius: 22%;
  isolation: isolate;
  box-shadow: 0 8px 20px -10px rgb(0 0 0 / 0.65);
}
.mgm-logo--claro { background: #fff; }
.mgm-logo--proprio { background: transparent; }
.mgm-logo__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mgm-logo__texto {
  display: grid; place-items: center; width: 100%; height: 100%; padding: 0 0.25rem;
  text-align: center; font-family: var(--font-display); font-weight: 800; line-height: 1;
}

.mgm-logo--xs { width: 2.25rem; height: 2.25rem; }                 /* 36px */
.mgm-logo--xs.mgm-logo--claro { padding: 3px; }
.mgm-logo--xs .mgm-logo__texto { font-size: 0.5rem; }

.mgm-logo--md { width: 4rem; height: 4rem; }                        /* 64px */
.mgm-logo--md.mgm-logo--claro { padding: 7px; }
.mgm-logo--md .mgm-logo__texto { font-size: 0.875rem; }
@media (min-width: 40rem) {
  .mgm-logo--md { width: 4.75rem; height: 4.75rem; }                /* 76px */
  .mgm-logo--md.mgm-logo--claro { padding: 8px; }
}

.mgm-logo--xl { width: 7rem; height: 7rem; }                        /* 112px */
.mgm-logo--xl.mgm-logo--claro { padding: 12px; }
.mgm-logo--xl .mgm-logo__texto { font-size: 1.25rem; }

.mgm-logo--lg { width: 100%; aspect-ratio: 1 / 1; }
.mgm-logo--lg.mgm-logo--claro { padding: 9%; }
.mgm-logo--lg .mgm-logo__texto { font-size: 1.5rem; }

/* o azulejo "+N outros apps" acompanha o formato dos icones */
[aria-label$="apps nesta categoria"] { border-radius: 22%; }

/* previa das opcoes de uma categoria no cartao de plano. Lado a lado, sem
   sobrepor: sobreposto, cada logo cobria a borda do anterior e cortava a marca. */
.mgm-pilha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.mgm-pilha__mais {
  margin-left: 0.25rem; font-family: var(--font-display); font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--color-navy-600);
}

/* ----- Grade de planos -------------------------------------------------------
   7 planos: 4 + 3 no desktop, 3 + 3 + 1 no notebook, 2 + 2 + 2 + 1 no tablet,
   sempre com a ultima fileira centralizada (antes sobrava um buraco a direita).
   row-gap maior porque o selo do cartao sobe acima da borda. */
.mgm-planos {
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: 1.25rem; row-gap: 2.5rem; margin-top: 2.75rem;
}
.mgm-planos > * { display: flex; flex: 0 1 100%; }
@media (min-width: 40rem) { .mgm-planos > * { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (min-width: 64rem) { .mgm-planos > * { flex-basis: calc((100% - 2 * 1.25rem) / 3); } }
@media (min-width: 80rem) { .mgm-planos > * { flex-basis: calc((100% - 3 * 1.25rem) / 4); } }

/* ----- Cartao de plano: CLARO sobre a pagina escura --------------------------
   O fundo translucido azul de antes ficava quase igual ao da pagina e o cartao
   nao se destacava. Cartao branco sobre navy-950 = contraste maximo. As cores
   de texto abaixo foram todas medidas contra o branco (>= 4.5:1; numeros
   grandes >= 3:1). A "borda" e box-shadow, para nao mexer no layout. */
.mgm-plano {
  position: relative; display: flex; flex-direction: column; width: 100%;
  border-radius: 1.25rem; background: #fff; color: var(--color-navy-950);
  /* faixa de cor no topo, identifica cada cartao de longe. border-top (e nao um
     ::before) para acompanhar a curva dos cantos */
  border-top: 0.375rem solid var(--color-brand-500);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 22px 44px -22px rgb(0 0 0 / 0.8);
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s;
}
.mgm-plano:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 2px var(--color-brand-300), 0 30px 56px -24px rgb(0 0 0 / 0.9);
}

/* acento secundario: "Melhor custo-beneficio" — contorno e faixa azuis */
.mgm-plano--selo {
  background: linear-gradient(180deg, #e6f6ff 0%, #fff 34%);
  box-shadow: 0 0 0 3px var(--color-brand-400), 0 26px 50px -22px rgb(41 179 245 / 0.5);
}
.mgm-plano--selo { border-top-width: 0.5rem; border-top-color: var(--color-brand-400); padding-top: 1.625rem; }
.mgm-plano--selo:hover { box-shadow: 0 0 0 3px var(--color-brand-300), 0 32px 58px -22px rgb(41 179 245 / 0.6); }

/* destaque principal: "O mais vendido" — contorno verde grosso, halo e brilho */
.mgm-plano--destaque {
  background: linear-gradient(180deg, #f0f9d9 0%, #fff 36%);
  box-shadow: 0 0 0 4px var(--color-signal-400), 0 0 0 11px rgb(168 206 56 / 0.2),
              0 36px 72px -22px rgb(168 206 56 / 0.6);
}
.mgm-plano--destaque { border-top-width: 0.625rem; border-top-color: var(--color-signal-400); padding-top: 1.5rem; }
.mgm-plano--destaque:hover {
  box-shadow: 0 0 0 4px var(--color-signal-300), 0 0 0 12px rgb(168 206 56 / 0.28),
              0 40px 78px -22px rgb(168 206 56 / 0.7);
}
@media (min-width: 80rem) {
  .mgm-plano--destaque { transform: translateY(-0.75rem); }
  .mgm-plano--destaque:hover { transform: translateY(-1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mgm-plano, .mgm-plano:hover, .mgm-plano--destaque, .mgm-plano--destaque:hover { transition: none; transform: none; }
}

/* selo em fita, sobre a borda de cima: nao empurra o conteudo, entao todos os
   cartoes ficam alinhados, com selo ou sem */
.mgm-plano__selo {
  position: absolute; top: 0; left: 1.5rem; z-index: 1; transform: translateY(-50%);
  display: inline-flex; align-items: center; border-radius: 999px; padding: 0.4375rem 0.875rem;
  font-family: var(--font-display); font-size: 0.8125rem; font-weight: 700; line-height: 1;
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  background: var(--color-brand-400); color: var(--color-navy-950);
  box-shadow: 0 6px 16px -6px rgb(0 0 0 / 0.6);
}
.mgm-plano--destaque .mgm-plano__selo { background: var(--color-signal-400); }

.mgm-plano__vel { display: flex; align-items: baseline; gap: 0.5rem; }
.mgm-plano__num {
  font-family: var(--font-display); font-weight: 800; font-size: 4rem; line-height: 0.85;
  color: var(--color-brand-700);                                   /* 4.92:1 */
}
.mgm-plano--destaque .mgm-plano__num { color: #4f6b10; }           /* 6.10:1 */
.mgm-plano__mega {
  font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-navy-950);
}
/* 3 linhas reservadas: preco e botao ficam na mesma altura nos cartoes lado a
   lado. Numa coluna so (celular) nao ha o que alinhar, e a reserva viraria vao. */
.mgm-plano__copy {
  margin-top: 0.875rem;
  font-size: 0.9375rem; line-height: 1.45; color: var(--color-navy-700);   /* 9.63:1 */
}
@media (min-width: 40rem) { .mgm-plano__copy { min-height: 4.125rem; } }

.mgm-plano__preco { display: flex; align-items: flex-end; margin-top: 1.25rem; color: var(--color-navy-950); }
.mgm-plano__rs {
  margin: 0 0.25rem 0.5rem 0; font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; line-height: 1; color: var(--color-brand-700);
}
.mgm-plano__int { font-family: var(--font-display); font-weight: 800; font-size: 3.25rem; line-height: 0.9; }
.mgm-plano__cent { margin-bottom: 0.35rem; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; }
.mgm-plano__mes { margin: 0 0 0.45rem 0.25rem; font-size: 0.875rem; line-height: 1; color: var(--color-navy-600); }

/* botao azul do site: bg-brand-600 com texto branco da 3.33:1 (reprova). Dentro
   dos cartoes usa o tom mais escuro, 4.92:1. */
.mgm-plano a.bg-brand-600 { background-color: var(--color-brand-700); }
.mgm-plano a.bg-brand-600:hover { background-color: var(--color-brand-800); }

.mgm-plano__apps {
  margin-top: 1.5rem; border-radius: 0.875rem; padding: 1rem;
  background: var(--color-navy-50); box-shadow: inset 0 0 0 1px var(--color-navy-100);
}
.mgm-plano__apps-tit {
  display: flex; align-items: center; gap: 0.375rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; line-height: 1;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-brand-800);   /* 5.92:1 */
}
.mgm-plano__vagas { display: grid; gap: 0.875rem; margin-top: 0.875rem; }
.mgm-plano__vaga { display: grid; gap: 0.5rem; }
.mgm-plano__vaga-txt { font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--color-navy-900); }
.mgm-plano__sem-app { margin-top: 0.625rem; font-size: 0.875rem; line-height: 1.45; color: var(--color-navy-700); }

/* logos dentro do cartao claro: sem a sombra escura (pesa no branco); o
   azulejo branco dos logos "claro" ganha um contorno para nao sumir */
.mgm-plano .mgm-logo { box-shadow: 0 2px 6px -2px rgb(5 23 38 / 0.35); }
.mgm-plano .mgm-logo--claro { box-shadow: 0 0 0 1px var(--color-navy-100), 0 2px 6px -2px rgb(5 23 38 / 0.25); }

.mgm-plano__extras { display: grid; gap: 0.5rem; margin-top: 1.25rem; font-size: 0.875rem; color: var(--color-navy-700); }
.mgm-plano__extras li { display: flex; align-items: center; gap: 0.5rem; }
.mgm-plano__extras svg { width: 1rem; height: 1rem; flex: none; color: var(--color-brand-600); }

.mgm-plano__cta { margin-top: auto; padding-top: 1.5rem; }

/* ----- A la carte ----------------------------------------------------------- */
.mgm-alc-grade { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin-top: 2rem; }
.mgm-alc-grade > * { display: flex; flex: 0 1 100%; }
@media (min-width: 40rem) { .mgm-alc-grade > * { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (min-width: 64rem) { .mgm-alc-grade > * { flex-basis: calc((100% - 2 * 1.25rem) / 3); } }

.mgm-alc { align-items: center; text-align: center; padding-top: 2.25rem; }
.mgm-alc__rotulo {
  margin-top: 1.25rem; font-family: var(--font-display); font-weight: 700; font-size: 0.75rem;
  line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-navy-600);
}
.mgm-alc__nome { margin-top: 0.375rem; font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--color-navy-950); }
.mgm-alc .mgm-plano__preco { justify-content: center; }
.mgm-alc__req {
  display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 1.25rem;
  border-radius: 999px; padding: 0.375rem 0.75rem; font-size: 0.8125rem; font-weight: 600;
  color: #3d5a0a; background: #f1f8e0;                                              /* 7.22:1 */
  box-shadow: inset 0 0 0 1px rgb(140 181 32 / 0.55);
}
.mgm-alc__req svg { width: 0.875rem; height: 0.875rem; flex: none; }
.mgm-alc__obs { margin-top: 0.625rem; font-size: 0.8125rem; color: var(--color-navy-600); }
.mgm-alc .mgm-plano__cta { width: 100%; }
.mgm-alc .mgm-logo { box-shadow: 0 10px 24px -12px rgb(5 23 38 / 0.55); }
.mgm-alc .mgm-logo--claro { box-shadow: 0 0 0 1px var(--color-navy-100), 0 10px 24px -12px rgb(5 23 38 / 0.45); }