/* =============================================================
   paginas-2026.css — componentes da página /numax-tem-ia/

   POR QUE ESTE ARQUIVO EXISTE
   O CSS compartilhado (numax-home-2026-08.css) traz o Tailwind COMPILADO
   da home, ou seja, só as classes que a home usa. Classe arbitrária que a
   home não usa (text-[#0a1a33], md:grid-cols-3, rounded-[20px]...) não
   existe lá e simplesmente não aplica — o texto sai branco no branco e o
   grid vira uma coluna.

   Em vez de torcer pra classe existir, os componentes moram aqui, com nomes
   proprios (.pg-*). Usado por /numax-tem-ia/ e /preco-numax/. O compartilhado continua respondendo
   pelo que já é da home: .ant-card, .ant-badge, .ant-grad, .ant-tile,
   .feat-wrap, .op-light, .faq-light-wrap, .reveal e .bento-base.

   PALETA (mesma da home)
     navy      #002652  #0c1c3d  #0a1122
     texto     #0a1a33 (título)  #43526b (corpo)
     azul      #0056B7  #5AB4FF
     Antenada  #FF2E7E → #FF7A2F  (gradiente)  · #FF6A9A (ícone)
     claro     #ffffff → #e8eef7
   ============================================================= */

/* ---------- blocos de seção ---------- */

.pg-wrap { max-width: 1120px; margin: 0 auto; }
.pg-wrap--narrow { max-width: 860px; }

.pg-head { text-align: center; margin-bottom: 4rem; }
.pg-eyebrow {
  font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #0056B7; margin-bottom: 1rem; display: block;
}
.pg-h2 {
  font-size: clamp(1.875rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -.05em;
  line-height: 1.25; color: #0a1a33; margin: 0;
}
.pg-sub {
  font-size: 1.125rem; line-height: 1.7; color: #43526b;
  max-width: 42rem; margin: 1.25rem auto 0;
}

/* Em bloco escuro, o mesmo par título/subtítulo inverte. */
.pg-dark .pg-h2 { color: #fff; }
.pg-dark .pg-sub { color: rgba(255,255,255,.72); }
.pg-dark .pg-eyebrow { color: #FF6A9A; }

/* ---------- grid de cards ---------- */

.pg-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pg-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .pg-grid--2 { grid-template-columns: repeat(2, 1fr); } }
/* 4 cards (os lugares onde a Antenada IA atua): 2x2 no tablet, 4 colunas no desktop. */
@media (min-width: 768px) { .pg-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pg-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.pg-card {
  background: #fff; border-radius: 24px; padding: 2rem;
  border: 1px solid rgba(12,26,51,.08);
  box-shadow: 0 16px 42px rgba(9,22,45,.09);
  display: flex; flex-direction: column;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.pg-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(9,22,45,.15);
  border-color: rgba(0,86,183,.35);
}
@media (min-width: 1024px) {
  .pg-card { padding: 2.25rem; }
  /* card largo (grid de 2) aguenta o respiro maior da home */
  .pg-grid--2 > .pg-card { padding: 3rem; }
}
.pg-card--ia { border: 2px solid rgba(255,46,126,.3); position: relative; }
.pg-card--pop { border: 2px solid rgba(255,46,126,.28); box-shadow: 0 16px 50px rgba(10,26,51,.1); }

.pg-card__icon {
  width: 2.75rem; height: 2.75rem; border-radius: .85rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;
  background: linear-gradient(135deg, #FF2E7E, #FF7A2F);
}
.pg-card__icon iconify-icon { font-size: 1.5rem; color: #fff; }

.pg-card__title {
  font-size: 1.3rem; font-weight: 700; color: #0a1a33;
  line-height: 1.35; margin: 0 0 .75rem;
}
.pg-card__text { font-size: 1rem; line-height: 1.65; color: #43526b; margin: 0 0 1.25rem; }
.pg-card__where {
  font-size: .8rem; font-weight: 600; color: #0056B7; margin: auto 0 0;
}

/* Selo "Novo" pendurado na borda de cima do card. */
.pg-card__new {
  position: absolute; top: -.85rem; left: 1.5rem; margin: 0;
}

/* ---------- cards de plano (versão clara) ---------- */

.pg-plan {
  background: #fff; border-radius: 24px; padding: 2rem; text-align: center;
  border: 1px solid rgba(12,26,51,.08);
  box-shadow: 0 16px 42px rgba(9,22,45,.09);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.pg-plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(9,22,45,.15);
  border-color: rgba(0,86,183,.35);
}
.pg-plan__name {
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #43526b; display: block; margin-bottom: .5rem;
}
.pg-plan__flag {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; color: #FF2E7E; margin-bottom: 1rem;
}
.pg-plan__price { font-size: .9rem; color: #43526b; margin: 0; line-height: 1.55; }
.pg-plan__price span { opacity: .7; }

/* ---------- hero ---------- */

.pg-hero { display: grid; gap: 3rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .pg-hero { grid-template-columns: 1fr 1fr; } }

.pg-hero__col { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.pg-h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.08; color: #fff; margin: 0;
}
.pg-hero__claim {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.35; color: #fff; margin: 0;
}
.pg-hero__text {
  font-size: 1.06rem; line-height: 1.65; color: rgba(255,255,255,.72);
  max-width: 34rem; margin: 0;
}

/* Marca-texto âmbar em Fraunces itálica — assinatura tipográfica da home. */
.pg-mark {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: 1em;
  background-image: linear-gradient(92deg, #FF9A3D, #E8B84B);
  color: #002652; padding: .04em .26em; border-radius: .14em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- botões ---------- */

.pg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: #0056B7; color: #fff; font-weight: 700; font-size: 1rem;
  padding: 1rem 2rem; border-radius: 999px; text-decoration: none;
  box-shadow: 0 0 40px rgba(0,86,183,.4);
  transition: box-shadow .3s ease, transform .3s ease;
}
.pg-btn:hover { box-shadow: 0 0 60px rgba(0,86,183,.6); }
.pg-btn--lg { font-size: 1.1rem; padding: 1.2rem 2.6rem; }
.pg-btn__arrow { transition: transform .3s ease; }
.pg-btn:hover .pg-btn__arrow { transform: translateX(.25rem); }

.pg-link-soft {
  font-size: .88rem; font-weight: 500; color: rgba(255,255,255,.6);
  text-decoration: none; transition: color .2s ease;
}
.pg-link-soft:hover { color: #fff; }

/* ---------- lista do card escuro ---------- */

.pg-list { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.pg-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: 1rem; }
.pg-list iconify-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: .15rem; }

/* Duas colunas no desktop — usado no card escuro, que é largo demais para
   uma lista de linha única. */
@media (min-width: 768px) {
  .pg-list--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.5rem; }
}

/* ---------- FAQ ---------- */

.pg-faq { display: flex; flex-direction: column; gap: 1.15rem; }
.pg-faq details {
  background: #fff; border-radius: 20px; padding: 1.6rem 1.8rem;
  border: 1px solid rgba(12,26,51,.08);
  box-shadow: 0 10px 30px rgba(9,22,45,.06);
  transition: box-shadow .3s, border-color .3s;
}
.pg-faq details:hover { box-shadow: 0 16px 40px rgba(9,22,45,.1); border-color: rgba(0,86,183,.25); }
.pg-faq details[open] { box-shadow: 0 16px 42px rgba(9,22,45,.1); }
.pg-faq summary {
  font-size: 1.05rem; font-weight: 700; color: #0a1a33; cursor: pointer;
  list-style: none;
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after {
  content: '+'; float: right; font-weight: 400; color: #0056B7; font-size: 1.4rem;
  line-height: 1; transition: transform .2s ease;
}
.pg-faq details[open] summary::after { content: '−'; }
.pg-faq p { font-size: .95rem; line-height: 1.65; color: #43526b; margin: 1rem 0 0; }

/* ---------- garantia ---------- */

.pg-guarantee { text-align: center; }
.pg-guarantee iconify-icon { font-size: 3rem; color: #FF6A9A; margin-bottom: 1.25rem; }

/* ---------- utilidades de seção ---------- */

.pg-sec { padding: 6rem 1.5rem; position: relative; z-index: 10; }
@media (min-width: 1024px) { .pg-sec { padding: 8rem 1.5rem; } }
.pg-sec--tight { padding: 5rem 1.5rem; }
.pg-sec--hero { padding: 10rem 1.5rem 5rem; position: relative; overflow: hidden; z-index: 10; }
@media (min-width: 1024px) { .pg-sec--hero { padding: 11rem 1.5rem 7rem; } }

.pg-note {
  font-size: .78rem; text-align: center; max-width: 42rem; margin: 2rem auto 0;
  line-height: 1.6; color: #43526b; opacity: .8;
}
.pg-note a { color: #0056B7; text-decoration: underline; }

.pg-foot-links {
  margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
  max-width: 28rem; margin-left: auto; margin-right: auto;
  font-size: .88rem; color: rgba(255,255,255,.5); text-align: center;
}
.pg-foot-links a { color: inherit; text-decoration: none; transition: color .2s ease; }
.pg-foot-links a:hover { color: #fff; }

.pg-badge-row {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.6);
}

/* O glow do hero e do CTA usa a cor da Antenada IA, não o azul do resto do site. */
.pg-glow {
  position: absolute; border-radius: 9999px; pointer-events: none;
  mix-blend-mode: screen; z-index: 0;
}
.pg-glow--hero {
  top: 8%; right: -12%; width: 55vw; height: 55vw;
  background: #FF2E7E; filter: blur(200px); opacity: .22;
}
.pg-glow--cta {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 70vw; height: 70vw; background: #FF2E7E; filter: blur(150px); opacity: .2;
}

/* O vídeo dentro do .ant-tile precisa preencher a moldura. */
.ant-tile video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- variantes usadas pela /preco-numax/ ---------- */

.pg-btn--ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.35); box-shadow: none;
}
.pg-btn--ghost:hover { background: rgba(255,255,255,.08); box-shadow: none; }

/* Card em bloco escuro: inverte fundo, borda e tipografia. */
.pg-card--dark {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: none;
}
.pg-card--dark .pg-card__title { color: #fff; }
.pg-card--dark .pg-card__text { color: rgba(255,255,255,.72); }
.pg-card--dark .pg-card__where a { color: #5AB4FF; text-decoration: none; }
.pg-card--dark .pg-card__where a:hover { text-decoration: underline; }
.pg-card--dark .pg-card__icon { background: linear-gradient(135deg, #0056B7, #5AB4FF); }

/* Tabela de preço — precisa rolar no celular sem empurrar a página. */
.pg-table-wrap {
  overflow-x: auto; border-radius: 1rem;
  border: 1px solid rgba(10,26,51,.08);
  box-shadow: 0 10px 40px rgba(10,26,51,.06);
  background: #fff;
}
.pg-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.pg-table th, .pg-table td {
  padding: 1.1rem 1.25rem; text-align: left;
  border-bottom: 1px solid rgba(10,26,51,.07);
}
.pg-table thead th {
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #43526b; background: #f6f8fc;
}
.pg-table tbody th {
  font-size: 1rem; font-weight: 700; color: #0a1a33; white-space: nowrap;
}
.pg-table td { font-size: .95rem; color: #43526b; }
.pg-table td b { color: #0a1a33; font-size: 1.05rem; }
.pg-table td small { display: block; margin-top: .2rem; font-size: .8rem; opacity: .75; }
.pg-table tbody tr:last-child th, .pg-table tbody tr:last-child td { border-bottom: 0; }

.pg-guarantee iconify-icon { font-size: 3rem; margin-bottom: 1.25rem; }

/* O hero agora tem foto de fundo + overlays em z-0; o conteudo sobe pra z-10. */
.pg-sec--hero > .pg-wrap { position: relative; z-index: 10; }

/* =============================================================
   HERO TECNOLÓGICO — /numax-tem-ia/

   A home abre com foto de consultório. Aqui não: a página é sobre a
   inteligência da Numax, então o topo fala a língua de tecnologia —
   fundo quase-preto, malha de grid tipo blueprint, brilho magenta da
   Antenada IA e um marcador em monoespaçada. Nada de foto.
   ============================================================= */

.tec-hero {
  position: relative; overflow: hidden; z-index: 10;
  padding: 9.5rem 1.5rem 5rem;
  background: #070c16;
}
@media (min-width: 1024px) { .tec-hero { padding: 11rem 1.5rem 7rem; } }

/* malha de grid — some nas bordas pra não virar papel quadriculado */
.tec-hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(120,160,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,255,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 60% at 30% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(80% 60% at 30% 40%, #000 30%, transparent 78%);
}
/* brilho da Antenada IA */
.tec-hero__glow {
  position: absolute; z-index: 0; pointer-events: none; border-radius: 9999px;
  top: -10%; right: -8%; width: 46vw; height: 46vw;
  background: radial-gradient(circle, rgba(255,46,126,.34), transparent 66%);
  filter: blur(60px);
}
.tec-hero__glow--2 {
  top: auto; bottom: -22%; right: auto; left: -10%; width: 40vw; height: 40vw;
  background: radial-gradient(circle, rgba(91,75,255,.3), transparent 66%);
}
/* linha de horizonte, separa o hero do que vem depois */
.tec-hero::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,46,126,.5), rgba(120,160,255,.35), transparent);
}

.tec-wrap {
  position: relative; z-index: 2; max-width: 1120px; margin: 0 auto;
  display: grid; gap: 3.5rem; align-items: center; grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .tec-wrap { grid-template-columns: 1.05fr .95fr; gap: 4rem; } }

.tec-col { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }


.tec-h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem); font-weight: 800; letter-spacing: -.045em;
  line-height: 1.08; color: #fff; margin: 0;
}
.tec-claim {
  font-size: clamp(1.3rem, 2.3vw, 1.8rem); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.35; color: #fff; margin: 0;
}
.tec-texto {
  font-size: 1.06rem; line-height: 1.7; color: rgba(255,255,255,.66);
  max-width: 34rem; margin: 0;
}

/* os três pontos de IA, listados como saída de terminal */
.tec-lista {
  list-style: none; margin: .25rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .6rem;
}
.tec-lista li {
  display: flex; align-items: center; gap: .7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem; color: rgba(255,255,255,.78);
}
.tec-lista li::before {
  content: '▸'; color: #FF6A9A; font-size: .9rem;
}

/* moldura do produto */
.tec-tela { position: relative; width: 100%; }
.tec-tela__brilho {
  position: absolute; inset: -12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,46,126,.28), transparent 62%);
  filter: blur(48px); z-index: 0;
}
.tec-tela video, .tec-tela img {
  position: relative; z-index: 1; width: 100%; display: block;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.tec-tela__legenda {
  position: absolute; z-index: 2; top: .9rem; right: .9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: linear-gradient(90deg, #FF2E7E, #FF7A2F);
  padding: .34rem .74rem; border-radius: 999px;
}