/* ============================================================
   melhorias.css — camada de REFINO sobre o site Jetcasa
   Carregada POR ÚLTIMO (depois de colors_and_type/site/components/pages/custom).
   Só ajusta: robustez, ritmo, micro-interação, contraste, foco, cadência
   e refinos por página (argumentos, datec, faq, blog, licenciados).
   NÃO altera cor de marca, logo, família tipográfica nem copy.
   Reaproveita os tokens (--accent, --jet-grey, --space-*) e as classes originais.
   Aprovado via mockup local em sandbox/mockup-melhorias-site (jun/2026).
   ============================================================ */

/* ============================================================
   A) GLOBAL — vale para todas as páginas
   ============================================================ */

/* 1) ROBUSTEZ DO REVEAL — corrige risco de "seção em branco".
   O site.css deixa .reveal em opacity:0 e só revela via JS (.is-in).
   Sem scripting (crawler/JS off), o conteúdo passa a ficar VISÍVEL. */
@media (scripting: none) {
  .reveal,
  .reveal-mask .reveal-mask-inner,
  .jc-stat-num > *,
  .jc-cta-copy h2 .serif-em {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 2) FOCO VISÍVEL — anel consistente; no escuro ganha halo branco. */
:where(a, button, select, input, [tabindex], .jc-arg-head, .jc-faq-q):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.section.bg-dark a:focus-visible,
.section.bg-dark button:focus-visible,
.jc-process a:focus-visible, .jc-process button:focus-visible,
.jc-cta a:focus-visible,     .jc-cta button:focus-visible,
.jc-footer a:focus-visible,  .jc-footer button:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 4px rgba(232, 78, 15, .45);
}

/* 3) MICRO-INTERAÇÃO DO BOTÃO PRIMÁRIO — leve elevação + sombra no hover. */
.btn-primary { box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -12px rgba(232, 78, 15, .60);
}
.btn-primary:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover { transform: none; }
}

/* 4) CONTRASTE — brancos de baixa opacidade no escuro elevados a >=4.5:1. */
.jc-footer-base       { color: rgba(255, 255, 255, .58); }  /* era ~.40 */
.jc-footer-brand .mono { color: rgba(255, 255, 255, .55); }  /* era ~.40 */
.jc-hero-cine-meta .v  { color: rgba(255, 255, 255, .86); }  /* era .78 */

/* 5) RITMO VERTICAL — pacing um pouco mais firme nas faixas da home (desktop). */
@media (min-width: 981px) {
  .jc-stats, .jc-pillars, .jc-args, .jc-process, .jc-net { padding: 136px 0; }
  .jc-cta { padding: 124px 0; }
  .jc-stats-head, .jc-pillars-head, .jc-args-head,
  .jc-process-head, .jc-net-head { margin-bottom: 72px; }
}

/* 6) CADÊNCIA — silencia etiquetas mono repetidas (marcadas no HTML). */
.melhoria-eyebrow-off { display: none; }


/* ============================================================
   B) HOME — varia a seção de Argumentos (sem tocar HTML/copy)
   ============================================================ */
@media (min-width: 981px) {
  /* (a) Argumentos PARES: espelha a grade — citação troca de lado. */
  .jc-args-list > .jc-arg:nth-child(even) .jc-arg-grid {
    grid-template-columns: 1.25fr 1fr 1fr 88px;
  }
  .jc-args-list > .jc-arg:nth-child(even) .jc-arg-grid > .jc-arg-media   { grid-column: 1 / -1; grid-row: 1; }
  .jc-args-list > .jc-arg:nth-child(even) .jc-arg-grid > .jc-arg-quote   { grid-column: 1; grid-row: 2; }
  .jc-args-list > .jc-arg:nth-child(even) .jc-arg-grid > .jc-arg-col:nth-child(3) { grid-column: 2; grid-row: 2; }
  .jc-args-list > .jc-arg:nth-child(even) .jc-arg-grid > .jc-arg-col:nth-child(4) { grid-column: 3; grid-row: 2; }
  .jc-args-list > .jc-arg:nth-child(even) .jc-arg-grid > .gutter         { grid-column: 4; grid-row: 2; }

  /* (b) ÚLTIMO argumento (clímax do DATEC): citação com mais presença. */
  .jc-args-list > .jc-arg:last-child .jc-arg-quote {
    border-top: 3px solid var(--accent);
    padding: 40px 36px;
  }
  .jc-args-list > .jc-arg:last-child .jc-arg-quote blockquote {
    font-size: 25px;
  }
}


/* ============================================================
   C) DATEC — ritmo do stamp card, faixa de autoridade e painel 3D
   ============================================================ */
.jc-datec-stamp { padding: var(--space-5) var(--space-6); gap: 0; }
.jc-datec-stamp .row { padding: 11px 0; }
.jc-datec-stamp .row:first-child { padding-top: 2px; }
.jc-datec-stamp .row:last-child { padding-bottom: 2px; }
.jc-datec-stamp .v.big { line-height: 0.92; }

.jc-authority li { padding: var(--space-5) var(--space-6); }
.jc-authority .l { margin-top: var(--space-2); }

#painel-3d .jc-panel3d { margin-top: var(--space-2); }
.jc-panel3d-hint { bottom: var(--space-4); }
@media (min-width: 821px) {
  .jc-panel3d-ui { padding: var(--space-6) var(--space-5); }
}


/* ============================================================
   D) FAQ — respiro entre grupos, hierarquia Q/A, alvo de toque
   (não toca em max-height de abertura nem em role/aria/.is-open)
   ============================================================ */
.jc-faq-group { margin-bottom: var(--space-7); }
.jc-faq-group:last-child { margin-bottom: 0; }
.jc-faq-group-title { padding-top: var(--space-5); padding-bottom: var(--space-4); }
.jc-faq-group:first-child .jc-faq-group-title { padding-top: 0; }
.jc-faq-q { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.jc-faq-item.is-open .jc-faq-q h3 { color: var(--accent); }
.jc-faq-item.is-open .jc-faq-ic::before,
.jc-faq-item.is-open .jc-faq-ic::after { opacity: 1; }
.jc-faq-item.is-open .jc-faq-a { padding-left: var(--space-5); border-left: 2px solid var(--accent); }
.jc-faq-a p { padding-bottom: var(--space-6); }
@media (max-width: 560px) {
  .jc-faq-group { margin-bottom: var(--space-6); }
  .jc-faq-q { gap: var(--space-4); }
  .jc-faq-item.is-open .jc-faq-a { padding-left: var(--space-4); }
}


/* ============================================================
   E) BLOG — 1º post vira destaque editorial + micro-interações
   ============================================================ */
@media (min-width: 861px) {
  .jc-post--feature {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }
  .jc-post--feature .jc-post-cover {
    aspect-ratio: auto;
    flex: 1 1 56%;
    min-height: 340px;
  }
  .jc-post--feature .jc-post-body {
    flex: 1 1 44%;
    justify-content: center;
    padding: 44px 48px;
    gap: 16px;
  }
  .jc-post--feature .jc-post-title {
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.08;
  }
  .jc-post--feature .jc-post-sum {
    font-size: 16px;
    max-width: 46ch;
    flex: 0 1 auto;
  }
}
.jc-post--feature .jc-post-cat::before {
  content: "Destaque · ";
  color: var(--accent);
}
.jc-post { position: relative; }
.jc-post-body { position: relative; }
.jc-post-body::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms cubic-bezier(0.2,0.8,0.2,1);
}
.jc-post:hover .jc-post-body::before,
.jc-post:focus-visible .jc-post-body::before { transform: scaleX(1); }
.jc-post-more .arrow { transition: transform 320ms cubic-bezier(0.2,0.8,0.2,1); }
.jc-post:hover .jc-post-more .arrow,
.jc-post:focus-visible .jc-post-more .arrow { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .jc-post-body::before,
  .jc-post-more .arrow { transition: none; }
}


/* ============================================================
   F) LICENCIADOS — estado "em breve" intencional + régua de capacidade
   ============================================================ */
.jc-soon {
  margin-top: 24px;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-left: 16px; border-left: 2px solid var(--accent);
}
.jc-soon-tag {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}
.jc-soon-line {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  letter-spacing: .03em; color: var(--fg-muted);
  max-width: 48ch; margin: 0;
}
.jc-net-tiers .jc-net-tier-top { align-items: flex-end; }
.jc-net-tiers .jc-net-tier-bar { margin-top: 4px; }