/* Vertexx TI - pagina /planos/. Carregar depois de site.css e lead-form.css. So tokens. */

/* ===== Topo claro e curto ===== */
.plans-top { text-align: center; padding: clamp(40px, 6vw, 72px) 0 var(--space-6); }
.plans-top h1 { max-width: 22ch; margin: 0 auto var(--space-3); font-size: clamp(1.9rem, 4vw, 2.8rem); }
.plans-top .lead { margin: 0 auto var(--space-5); }
.cycle { display: inline-flex; padding: 4px; gap: 4px; border: 1.5px solid var(--border); border-radius: 999px; background: var(--surface); }
.cycle-btn {
  min-height: 44px; padding: 8px 22px; border: 0; border-radius: 999px; background: transparent; color: var(--heading);
  font-family: var(--font-title); font-weight: 600; font-size: .95rem; transition: background .18s, color .18s;
}
.cycle-btn:hover { background: var(--surface-2); }
.cycle-btn[aria-pressed='true'] { background: var(--accent); color: var(--on-accent); }
.cycle-off { font-weight: 500; }
.gate-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; margin-top: var(--space-4); font-size: .92rem; color: var(--text-muted); }
.gate-note svg { flex: none; }
.link-btn { padding: 4px 2px; border: 0; background: none; font-family: var(--font-title); font-weight: 600; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--accent-hover); }

/* ===== Cards ===== */
.plans-cards { padding-top: var(--space-7); padding-bottom: var(--section-y); }
.plans-cards .plans-grid { padding-top: var(--space-4); }
.plan.is-selected { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow-md); }
.plan-lead + .plan-list { margin-top: 0; }

.price-box { min-height: 118px; padding: var(--space-3) 0; }
.price-amount { font-family: var(--font-title); font-weight: 700; font-size: 2.1rem; line-height: 1.15; letter-spacing: -.02em; color: var(--heading); }
.price-amount .per { font-size: .95rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; margin-left: 2px; }
.price-amount.is-blurred { filter: blur(4px); user-select: none; pointer-events: none; }
.price-sub { margin-top: var(--space-2); font-size: .85rem; line-height: 1.45; color: var(--text-muted); }
.price-save { margin-top: var(--space-1); font-size: .88rem; font-weight: 600; color: var(--accent-text); }
.price-save:empty { display: none; }
.price-in { animation: price-in .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes price-in { from { opacity: 0; transform: translateY(8px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.plan-cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); }
.plan-consult { text-align: center; font-family: var(--font-title); font-weight: 600; font-size: .9rem; color: var(--accent-text); padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }
.plan-consult:hover { color: var(--accent-hover); }
.plans-foot { min-height: 1.5em; }

/* ===== Comparativo (sem rolagem horizontal da pagina; rola so dentro do bloco) ===== */
.cmp-scroll { position: relative; overflow-x: auto; max-width: 880px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cmp-scroll:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.cmp { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; font-size: .95rem; }
.cmp th, .cmp td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; line-height: 1.4; }
.cmp thead th { position: sticky; top: 0; background: var(--surface-2); font-family: var(--font-title); font-weight: 600; color: var(--heading); }
.cmp thead th.cmp-feat { color: var(--accent-text); }
.cmp tbody th[scope='row'] { text-align: left; font-weight: 500; color: var(--text); width: 40%; position: sticky; left: 0; background: var(--surface); }
.cmp .cmp-cat th { text-align: left; background: var(--surface-2); font-family: var(--font-title); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); position: static; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td { color: var(--text); }
.cmp td svg { margin: 0 auto; }
.cmp .ico-check { color: var(--accent-text); }
.cmp .ico-dash { color: var(--text-muted); }
.cmp .cmp-text { font-weight: 600; font-size: .9rem; color: var(--heading); }

/* ===== Confianca ===== */
.trust { list-style: none; }
.trust .card { display: flex; flex-direction: column; gap: var(--space-2); }
.trust .ico-check { color: var(--accent-text); margin-bottom: var(--space-1); }
.trust p { font-size: .92rem; color: var(--text-muted); line-height: 1.55; }

/* ===== Modais (dialog nativo: foco preso, Esc e aria-modal) ===== */
.modal {
  width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-md); overflow-y: auto; overscroll-behavior: contain;
}
.modal.modal-sm { width: min(480px, calc(100vw - 32px)); }
.modal::backdrop { background: color-mix(in srgb, var(--brand-navy) 62%, transparent); }
.modal[open] { animation: modal-in .22s ease both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-4); }
.modal-head h2 { font-size: 1.35rem; }
.modal-head p { margin-top: var(--space-2); font-size: .93rem; color: var(--text-muted); line-height: 1.5; }
.modal-x { flex: none; width: 44px; height: 44px; margin: -6px -8px 0 0; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--heading); }
.modal-x:hover { background: var(--surface-2); }
.modal-form, .modal-body { padding: 0 var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

/* Consultor: card compacto e centralizado (desktop e celular) */
.modal.modal-consultor { position: fixed; inset: 0; margin: auto; width: min(400px, calc(100vw - 24px)); height: fit-content; max-height: calc(100dvh - 24px); overflow-x: hidden; }
.modal-consultor .modal-x { position: absolute; top: var(--space-2); right: var(--space-2); margin: 0; }
.consultor-body { padding: var(--space-6) var(--space-5) max(var(--space-5), env(safe-area-inset-bottom)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.consultor-badge { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--accent-text); }
.modal-consultor h2 { font-size: 1.25rem; line-height: 1.25; text-wrap: balance; }
.modal-consultor p { font-size: .95rem; line-height: 1.5; color: var(--text-muted); text-wrap: balance; }
.consultor-actions { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); margin-top: var(--space-2); }
.consultor-actions .btn svg { flex: none; }
.consultor-actions .btn { width: 100%; white-space: normal; text-align: center; }
.consultor-link { min-height: 44px; border: 0; background: transparent; color: var(--accent-text); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: var(--radius); }
.consultor-link:hover { background: var(--surface-2); }
body:has(dialog[open]) .wa-float { display: none; }

/* Gate de precos: modal compacto, campos so com placeholder */
.modal.modal-gate { width: min(420px, calc(100vw - 32px)); }
.modal-gate .modal-head { padding: var(--space-4) var(--space-4) var(--space-3); }
.modal-gate .modal-head h2 { font-size: 1.2rem; }
.modal-gate .modal-head p { margin-top: 4px; font-size: .88rem; line-height: 1.4; }
.modal-gate .modal-form { padding: 0 var(--space-4) var(--space-4); gap: var(--space-3); }
.modal-gate .form-grid { gap: var(--space-3); }
.modal-gate .form-actions { gap: var(--space-2); }
.modal-gate .form-note { font-size: .78rem; }
.modal-gate .form-note a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.modal-gate .form-actions .btn[disabled]:not([aria-busy]) { opacity: .5; cursor: not-allowed; }
.modal-gate .ts-slot:not(:empty) { min-height: 0; }

@media (max-width: 639px) {
  .plans-top { padding-top: var(--space-6); }
  .cycle { width: 100%; max-width: 360px; }
  .cycle-btn { flex: 1; padding-inline: 12px; }
  .price-box { min-height: 0; }
  .cmp th, .cmp td { padding: 10px 8px; font-size: .88rem; }
  .cmp tbody th[scope='row'] { width: 38%; min-width: 150px; }
  /* modal vira tela cheia; botao de envio fica visivel ao rolar */
  .modal-gate .modal-head { position: static; border-bottom: 0; padding: var(--space-4) var(--space-4) var(--space-2); }
  .modal-gate .modal-form { padding: 0 var(--space-4) var(--space-4); }
  .modal-gate .modal-form .form-actions { position: static; border-top: 0; padding: 0; }
  .modal-gate .modal-form .form-note { display: block; }
  .modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .modal.modal-consultor { width: calc(100vw - 24px); max-width: 400px; height: fit-content; max-height: calc(100dvh - 24px); border-radius: var(--radius-lg); }
  .modal.modal-gate { width: calc(100vw - 24px); max-width: 420px; height: fit-content; max-height: calc(100dvh - 24px); border-radius: var(--radius-lg); }
  .modal-head { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: var(--space-4); border-bottom: 1px solid var(--border); }
  .modal-head h2 { font-size: 1.15rem; }
  .modal-form { padding: var(--space-4) var(--space-4) 0; }
  .modal-body { padding: 0 var(--space-4) var(--space-5); }
  .modal-form .form-actions { position: sticky; bottom: 0; z-index: 2; background: var(--surface); padding: var(--space-3) 0 max(var(--space-4), env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
  .modal-form .form-note { display: none; }
}