/* =========================================================
   Jetcasa — customizações sobre o design handoff
   (carregado DEPOIS de site/components/pages.css)
   1) Hero cinematográfico fullbleed
   2) Ênfase por marca-texto animado (substitui a serifa)
   3) Assinatura jolf no rodapé
   ========================================================= */

/* ---------- 1) HERO CINEMATOGRÁFICO ---------- */
.jc-hero-cine { position: relative; min-height: 92vh; display: flex; flex-direction: column; justify-content: center; color: #fff; overflow: hidden; background: #1a1a1a; }
.jc-hero-cine-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.jc-hero-cine-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(15,15,15,.92) 0%, rgba(15,15,15,.62) 46%, rgba(15,15,15,.28) 100%),
    linear-gradient(0deg, rgba(15,15,15,.80) 0%, rgba(15,15,15,0) 46%);
}
.jc-hero-cine-inner { position: relative; z-index: 2; padding: 134px 0 56px; }
.jc-hero-cine-copy { max-width: 62ch; text-align: left; }
/* texto SEMPRE branco sobre o vídeo (leitura) */
.jc-hero-cine-title, .jc-hero-cine-title .line, .jc-hero-cine-title .reveal-mask-inner, .jc-hero-cine-lead { color: #fff !important; }
.jc-hero-cine-title { margin: 22px 0 0; }
.jc-hero-cine-title .accent-mark { color: var(--accent) !important; }
.jc-hero-cine-lead { margin-top: 26px; max-width: 52ch; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.55; }
.jc-hero-cine-actions { margin-top: 36px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.jc-hero-cine-actions .btn-link { color: #fff; }
.jc-hero-cine-actions .btn-link .arrow { color: var(--accent); }
.jc-hero-cine-meta { position: relative; z-index: 2; margin-top: auto; border-top: 1px solid rgba(255,255,255,.16); }
.jc-hero-cine-meta ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.jc-hero-cine-meta li { padding: 22px 28px 24px 24px; display: flex; flex-direction: column; gap: 7px; border-left: 1px solid rgba(255,255,255,.10); }
.jc-hero-cine-meta li:first-child { border-left: 0; padding-left: 0; }
.jc-hero-cine-meta .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.jc-hero-cine-meta .v { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.78); }
@media (max-width: 900px) { .jc-hero-cine-meta ul { grid-template-columns: 1fr 1fr; } .jc-hero-cine-meta li:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 560px) { .jc-hero-cine { min-height: 86vh; } .jc-hero-cine-inner { padding: 104px 0 36px; } .jc-hero-cine-meta ul { grid-template-columns: 1fr; } .jc-hero-cine-meta li { border-left: 0; padding-left: 0; padding-top: 16px; padding-bottom: 16px; border-top: 1px solid rgba(255,255,255,.10); } .jc-hero-cine-meta li:first-child { border-top: 0; } }

/* ---------- 2) ÊNFASE: marca-texto (mantém a fonte; cobre a palavra inteira) ---------- */
/* Background na própria palavra + box-decoration-break: clone → cobre o texto
   inteiro mesmo quebrando em duas linhas (o ::before pegava só o último pedaço).
   Varre via background-size, disparado pelo observer (custom.js: .hl-arm -> .hl-in).
   Visível por padrão se o JS não rodar — a ênfase nunca some. */
.serif-em {
  font-family: inherit !important; font-style: normal !important; font-weight: inherit; color: inherit;
  padding: 0 .06em;
  background-image: linear-gradient(rgba(232,78,15,.28), rgba(232,78,15,.28));
  background-repeat: no-repeat; background-position: 0 66%; background-size: 100% .82em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.section.bg-dark .serif-em, .jc-cta .serif-em, .jc-pagecta .serif-em, .jc-process .serif-em, .jc-sec.dark .serif-em {
  color: #fff !important; background-image: linear-gradient(rgba(232,78,15,.44), rgba(232,78,15,.44));
}
.serif-em.hl-arm { background-size: 0% .82em; transition: background-size 760ms cubic-bezier(.2, .8, .2, 1); }
.serif-em.hl-arm.hl-in { background-size: 100% .82em; }
@media (prefers-reduced-motion: reduce) { .serif-em.hl-arm { background-size: 100% .82em; transition: none; } }

/* ---------- 3) ASSINATURA JOLF (rodapé, todas as páginas) ---------- */
.jc-footer-jolf { border-top: 1px solid rgba(255,255,255,.10); }
.jc-footer-jolf .container { padding-top: 18px; padding-bottom: 4px; text-align: center; }
.jolf-credit {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 300; font-size: 12px; letter-spacing: 0.04em;
  color: rgba(10,10,10,0.45); text-decoration: none; line-height: 1;
  transition: color .25s cubic-bezier(.23,1,.32,1);
}
.jolf-credit:hover { color: rgba(10,10,10,1); }
.jolf-credit__mark {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400; font-size: 15px;
  letter-spacing: -0.03em; text-transform: lowercase; color: inherit;
}
.jolf-credit--inverse { color: rgba(255,255,255,0.55); }
.jolf-credit--inverse:hover { color: rgba(255,255,255,1); }