/* ============================================================================
   Anthares 44 — PRICING (página /pricing · escopo .pr-*)
   ----------------------------------------------------------------------------
   Reutiliza o Design System do projeto: o container global (.container) e a
   família Inter. Os CARDS são o COMPONENTE OFICIAL do projeto — .plan-card de
   assets/src/styles/components.css (render em assets/src/components/plans.js;
   usado por Billing e pela criação de projeto) — copiado VERBATIM aqui, com os
   tokens (--ink/--muted/--faint/--blue/--ease…) reexpostos em .pr para resolver
   fora dos módulos ES. Seletores .pr-* = específicos da página; .plan-card* =
   componente. A LÓGICA da página é preservada: reveal (.pr-anim/.is-in) e o
   alternador Mensal/Anual (.pr-price__value). Respeita prefers-reduced-motion.
   ========================================================================== */

.pr {
    background: var(--page-background);
    color: #101114;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    /* espaço para a navbar absoluta (mesma métrica das demais páginas) */
    padding-top: 64px;
    /* tokens do componente PlanCard (mesmos valores de .np/.dash) */
    --ink: #0e0f12; --ink-2: #3f434b; --muted: #6b7280; --faint: #9ca3af;
    --line: rgba(15,16,18,.09); --line-2: rgba(15,16,18,.055); --hover: #f4f5f6;
    --blue: #2563EB; --blue-2: #1d4ed8; --blue-bg: rgba(37,99,235,.09); --green: #16a34a;
    --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------- cabeçalho -------------------------------- */
.pr-hero { text-align: center; padding: clamp(52px, 8vh, 92px) 0 clamp(30px, 4vw, 46px); }
.pr-eyebrow {
    display: inline-block;
    font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: #8a8f98;
}
.pr-hero h1 {
    margin: clamp(12px, 1.6vw, 18px) auto 0;
    max-width: 780px;
    font-weight: 500;
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #101114;
}
.pr-hero h1 strong { font-weight: 600; }
.pr-hero p {
    margin: clamp(14px, 2vw, 22px) auto 0;
    max-width: 560px;
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.6;
    color: #6a6d76;
}

/* ------------------------- alternador Mensal/Anual ----------------------- */
.pr-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    margin: clamp(24px, 3vw, 34px) auto 0;
    padding: 5px; border-radius: 9999px;
    background: #ffffff; border: 1px solid rgba(15,16,18,.08);
    box-shadow: 0 1px 2px rgba(15,16,18,.04);
}
.pr-toggle__btn {
    appearance: none; border: none; cursor: pointer;
    padding: 9px 18px; border-radius: 9999px;
    font: inherit; font-size: 14px; font-weight: 500; color: #6a6d76;
    background: transparent;
    transition: color .2s ease, background .28s cubic-bezier(.22,.61,.36,1);
}
.pr-toggle__btn.is-active { background: #101114; color: #ffffff; }
.pr-toggle__save {
    margin-left: 2px; padding: 3px 9px; border-radius: 9999px;
    background: var(--primary-color); color: #101114;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
}

/* ======================= COMPONENTE PlanCard (OFICIAL) ====================
   Cópia VERBATIM de assets/src/styles/components.css (.plan-cards / .plan-card*).
   Não modificar aqui: é o mesmo componente do Billing/criação de projeto. */
.plan-cards {
    display: flex;
    justify-content: center;           /* conjunto dos cards centralizado na página */
    align-items: stretch;              /* os três cards com EXATAMENTE a mesma altura */
    gap: 32px;
    flex-wrap: nowrap;                 /* os três cards lado a lado */
    width: 100%;
    max-width: 1180px;
    margin: 48px auto 0;               /* container centralizado */
}
/* Abaixo da largura da linha de 3 cards, quebram (2 → 1) SEM comprimir a largura. */
@media (max-width: 1130px) { .plan-cards { flex-wrap: wrap; } }
.plan-card { position: relative; flex: 0 0 340px; width: 340px; min-width: 340px; max-width: 340px; box-sizing: border-box; display: flex; flex-direction: column; background: #fff; border: 1px solid #EDEDED; border-radius: 18px; padding: 24px; box-shadow: 0 14px 34px -24px rgba(15,16,18,.18); word-break: normal; overflow-wrap: break-word; transition: box-shadow .25s var(--ease), border-color .2s var(--ease); }
.plan-card:hover { box-shadow: 0 26px 50px -24px rgba(15,16,18,.22); }
.plan-card { -webkit-tap-highlight-color: transparent; }
.plan-card:focus, .plan-card:focus-visible, .plan-card:active { outline: none; }
.plan-card__btn:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.plan-card__btn:focus:not(:focus-visible) { outline: none; }
/* recomendado (Professional): distinção só por BORDA azul sutil + selo. */
.plan-card--featured { border-color: rgba(37,99,235,.35); }
/* selo "Mais Popular" — pill discreta azul clara, CENTRALIZADA acima do card */
.plan-card__pop { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap; height: 26px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .01em; padding: 0 12px; border-radius: 999px; background: #EAF0FF; color: var(--blue-2); border: 1px solid #D6E2FF; box-shadow: 0 2px 6px -2px rgba(37,99,235,.22); }
/* headline "Enterprise" — nome no lugar do preço (plano Custom) */
.plan-card__price--name { font-size: 28px; letter-spacing: -.03em; }
.plan-card__price--sub { min-height: 0; font-size: 26px; margin-top: 4px; }
/* preço — MAIOR destaque, no TOPO. min-height alinha pitch/botões nos 3 cards. */
.plan-card__price { display: flex; align-items: flex-end; min-height: 38px; font-size: 38px; font-weight: 700; letter-spacing: -.045em; color: var(--ink); margin: 0; line-height: 1; }
.plan-card__price span { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: normal; margin-left: 1px; }
/* bloco de apresentação (subtítulo + descrição) — entre linhas discretas. */
.plan-card__pitch { margin-top: 12px; padding: 12px 0; border-top: 1px solid #F1F1F1; border-bottom: 1px solid #F1F1F1; min-height: 66px; box-sizing: border-box; }
.plan-card__tagline { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.plan-card__desc { font-size: 12.5px; font-weight: 400; line-height: 1.45; color: #6B7280; margin: 5px 0 0; }
/* botão — largura total, 46px, radius 12. */
.plan-card__btn { position: relative; width: 100%; height: 46px; margin: 14px 0 0; border: 0; border-radius: 12px; background: #111214; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s var(--ease); }
.plan-card__btn:hover { background: #26272b; transform: translateY(-1px); }
.plan-card__btn:active { transform: translateY(0); }
/* recursos — separados por linha discreta */
.plan-card__specs { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid #F1F1F1; display: flex; flex-direction: column; gap: 12px; flex: 0 0 auto; }
.plan-card__specs li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 400; line-height: 1.35; color: var(--muted); }
.plan-card__check { color: var(--faint); display: inline-grid; place-items: center; flex: 0 0 auto; }
.plan-card__check svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .plan-card, .plan-card__btn { transition: none; } }

/* ---- adaptações MÍNIMAS p/ preservar a LÓGICA da página (visual inalterado) ---- */
/* CTA da página é <a> (rotas signup/contact), não <button> → normaliza para
   ficar idêntico ao .plan-card__btn. */
.pr a.plan-card__btn { display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
/* hook do alternador Mensal/Anual (só no Pro): mantém o tamanho grande do preço
   no <span> que o JS troca (senão herdaria o .plan-card__price span = 14px). */
.pr .plan-card__price .pr-price__value { font-size: 38px; font-weight: 700; letter-spacing: -.045em; color: var(--ink); margin-left: 0; transition: opacity .2s ease; }
/* segurança mobile: em telas < 388px o card fixo de 340px encolhe p/ caber
   (evita scroll horizontal; ≥ 388px o layout do componente é intocado). */
@media (max-width: 388px) { .plan-card { flex-basis: 100%; width: 100%; min-width: 0; max-width: 340px; } }

/* --------------------------------- seção --------------------------------- */
.pr-section { padding: clamp(48px, 7vh, 88px) 0; }

/* =============================== REVEAL ==================================
   Mesmo padrão de solutions.js: nasce VISÍVEL; o JS marca .pr-reveal e ativa
   .is-in item a item. Sem JS, tudo permanece visível. */
.pr-reveal .pr-anim { opacity: 0; transform: translateY(18px); }
.pr-reveal .pr-anim.is-in {
    opacity: 1; transform: translateY(0);
    transition: opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
}

/* ============================= RESPONSIVO =============================== */
/* Os cards seguem a responsividade do próprio componente (quebra em ≤1130px e
   safeguard ≤388px, acima). Aqui só a folga da página/alternador. */
@media (max-width: 620px) {
    .pr { padding-top: 70px; }
    .pr-toggle { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 390px) {
    .pr { padding-top: 64px; }
}

/* Acessibilidade: sem movimento p/ quem prefere menos animação. */
@media (prefers-reduced-motion: reduce) {
    .pr-reveal .pr-anim { opacity: 1 !important; transform: none !important; transition: none !important; }
    .pr-toggle__btn { transition: none; }
}

/* Touch: alvo do alternador Mensal/Anual ≥44px. */
@media (pointer: coarse) {
    .pr-toggle__btn { min-height: 44px; }
}