/* ==========================================================================
   CT Tarcísio Alves Jiu-Jitsu — Landing Pages segmentadas (Kids, 40+, e as
   3 futuras: Emagrecimento, Superação, Autodefesa).
   Tokens em variaveis.css · componentes reutilizáveis (header, botão, selo,
   trust-strip, objeção, accordion, footer) em componentes.css.
   Este arquivo é o que é comum às LPs mas diferente do institucional: header
   simplificado sem menu completo, hero próprio (mesma linguagem visual do
   hero institucional, mas em classe própria pra não acoplar em
   institucional.css), zigzag de credencial, bento de grade com 3 células e
   fechamento dedicado. Formulário de captação vive em formulario.css.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* HEADER SIMPLIFICADO — só marca + 1 CTA, sem nav-links/hambúrguer        */
/* ---------------------------------------------------------------------- */

.lp-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: 72px;
  display: flex;
  align-items: center;
  background: rgba(11, 11, 10, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cor-borda-escura);
  transition: height 0.3s var(--ease-suave), background 0.3s var(--ease-suave);
}
.lp-header.is-compact { height: 60px; background: rgba(11, 11, 10, 0.92); }
.lp-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.lp-header .btn { padding: 0.7rem 1.3rem; font-size: 0.88rem; }

/* ---------------------------------------------------------------------- */
/* HERO — split assimétrico (texto + foto real em card), fundo escuro     */
/* Mesma linguagem visual do hero institucional, classe própria de LP.    */
/* ---------------------------------------------------------------------- */

.lp-hero {
  position: relative;
  background: var(--cor-preto);
  padding-block: calc(72px + clamp(2.5rem, 6vw, 5rem)) clamp(3rem, 6vw, 5rem);
  overflow: clip;
}
.lp-hero__textura {
  position: absolute;
  inset: 0;
  background-image: url("../img/textura-kimono.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.lp-hero__gradiente {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 12% 0%, rgba(201, 150, 47, 0.14) 0%, rgba(11, 11, 10, 0) 55%),
              linear-gradient(180deg, rgba(11,11,10,0) 0%, rgba(11,11,10,.4) 100%);
  pointer-events: none;
}
.lp-hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.lp-hero__eyebrow { color: var(--cor-dourado); }
.lp-hero__titulo {
  font-size: var(--texto-h1);
  color: var(--cor-titulo-claro);
  margin-bottom: 1.15rem;
}
.lp-hero__subtitulo {
  max-width: 46ch;
  font-size: var(--texto-corpo-lg);
  color: var(--cor-texto-claro);
  margin-bottom: 1.9rem;
}
.lp-hero__acoes { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.lp-hero__foto {
  position: relative;
  border-radius: var(--raio-card);
  overflow: hidden;
  border: 1px solid rgba(201, 150, 47, 0.35);
  box-shadow: var(--sombra-suave);
  aspect-ratio: 8 / 5;
}
.lp-hero__foto img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .lp-hero .container { grid-template-columns: 1fr; }
  .lp-hero__foto { max-width: 100%; order: -1; }
}

/* ---------------------------------------------------------------------- */
/* IDENTIFICAÇÃO — prose curto, coluna única, o "isso não é culpa sua"    */
/* ---------------------------------------------------------------------- */

.lp-identificacao { padding-block: var(--espaco-secao); }
.lp-identificacao .container { max-width: 700px; }
.lp-identificacao h2 {
  font-size: var(--texto-h2);
  color: var(--cor-titulo-escuro);
  margin-bottom: 1.1rem;
}
.lp-identificacao p {
  font-size: var(--texto-corpo-lg);
  max-width: var(--largura-leitura);
  margin-bottom: 1rem;
}
.lp-identificacao p:last-child { margin-bottom: 0; }
.lp-identificacao .lp-identificacao__bloco + .lp-identificacao__bloco { margin-top: 1.75rem; }

/* Citação de narrativa de persona (LP Superação) — nunca depoimento real com
   nome/foto, só ilustração de padrão de fala coletado em pesquisa. Estilo
   discreto: borda dourada à esquerda + itálico, para diferenciar visualmente
   de texto corrido sem virar card de review. */
.lp-identificacao__citacao {
  margin: 1.25rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--cor-dourado);
}
.lp-identificacao__citacao p {
  font-style: italic;
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------- */
/* CREDENCIAL EM ZIGZAG — foto do mestre + texto, fundo escuro            */
/* ---------------------------------------------------------------------- */

.lp-credencial {
  position: relative;
  background: var(--cor-preto);
  padding-block: var(--espaco-secao);
  overflow: clip;
}
.lp-credencial__textura {
  position: absolute; inset: 0;
  background-image: url("../img/textura-kimono.jpg");
  background-size: cover; background-position: center;
  opacity: 0.12;
  mix-blend-mode: luminosity;
}
.lp-credencial .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.lp-credencial__foto {
  position: relative;
  border-radius: var(--raio-card);
  overflow: hidden;
  aspect-ratio: 914 / 1721;
  box-shadow: var(--sombra-suave);
  max-width: 280px;
}
.lp-credencial__foto img { width: 100%; height: 100%; object-fit: cover; }
.lp-credencial__foto::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--cor-borda-escura);
  border-radius: inherit;
}
.lp-credencial__texto h2 {
  font-size: var(--texto-h2);
  color: var(--cor-titulo-claro);
  margin-bottom: 1.1rem;
}
.lp-credencial__texto p {
  font-size: var(--texto-corpo-lg);
  color: var(--cor-texto-claro);
  max-width: 52ch;
}

@media (max-width: 860px) {
  .lp-credencial .container { grid-template-columns: 1fr; }
  .lp-credencial__foto { max-width: 220px; margin-inline: auto; }
  .lp-credencial__texto { text-align: center; }
  .lp-credencial__texto p { margin-inline: auto; }
}

/* ---------------------------------------------------------------------- */
/* GRADE — bento de 3 células (dia/horário, supervisão, comunidade)       */
/* ---------------------------------------------------------------------- */

.lp-grade { padding-block: var(--espaco-secao); background: var(--cor-branco-alt); }
.lp-grade > .container > h2 {
  font-size: var(--texto-h2);
  color: var(--cor-titulo-escuro);
  margin-bottom: 2rem;
}
.lp-grade-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.lp-grade-cell {
  border-radius: var(--raio-card);
  padding: 1.6rem;
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda-clara);
  color: var(--cor-texto-escuro);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lp-grade-cell i { font-size: 26px; color: var(--cor-dourado); margin-bottom: 0.3rem; }
.lp-grade-cell strong { font-family: var(--fonte-display); font-size: 1.1rem; color: var(--cor-titulo-escuro); }
.lp-grade-cell span { font-size: 0.92rem; }

@media (max-width: 780px) {
  .lp-grade-bento { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* PARA QUEM / DÚVIDAS — reaproveita .objecao de componentes.css          */
/* ---------------------------------------------------------------------- */

.lp-objecoes { padding-block: var(--espaco-secao); }
.lp-objecoes .container { max-width: 880px; }
.lp-objecoes > .container > h2 {
  font-size: var(--texto-h2);
  color: var(--cor-titulo-escuro);
  margin-bottom: 1rem;
}
.lp-objecoes__intro {
  font-size: var(--texto-corpo-lg);
  max-width: var(--largura-leitura);
  margin-bottom: 2rem;
}

/* ---------------------------------------------------------------------- */
/* FAQ — reaproveita .accordion-item de componentes.css                   */
/* ---------------------------------------------------------------------- */

.lp-faq { padding-block: var(--espaco-secao); }
.lp-faq .container { max-width: 780px; }
.lp-faq > .container > h2 {
  font-size: var(--texto-h2);
  color: var(--cor-titulo-escuro);
  margin-bottom: 1.75rem;
}

/* ---------------------------------------------------------------------- */
/* FECHAMENTO — statement final, mesmo padrão visual do institucional      */
/* ---------------------------------------------------------------------- */

.lp-fechamento {
  position: relative;
  background: var(--cor-preto);
  padding-block: clamp(4rem, 8vw, 6.5rem);
  text-align: center;
  overflow: clip;
}
.lp-fechamento__textura {
  position: absolute; inset: 0;
  background-image: url("../img/textura-kimono.jpg");
  background-size: cover; background-position: center;
  opacity: 0.12; mix-blend-mode: luminosity;
}
.lp-fechamento .container { position: relative; z-index: 1; max-width: 720px; }
.lp-fechamento h2 {
  font-size: clamp(1.9rem, 2.6vw + 1.1rem, 3rem);
  color: var(--cor-titulo-claro);
  margin-bottom: 1.1rem;
}
.lp-fechamento p {
  font-size: var(--texto-corpo-lg);
  color: var(--cor-texto-claro);
  max-width: 52ch;
  margin-inline: auto 2.1rem;
}

/* ---------------------------------------------------------------------- */
/* Rodapé simplificado de LP — link único de volta ao institucional        */
/* ---------------------------------------------------------------------- */

.lp-footer-voltar {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  opacity: 0.75;
}
.lp-footer-voltar:hover { opacity: 1; color: var(--cor-dourado); }

/* ---------------------------------------------------------------------- */
/* TEMAS POR CATEGORIA — ajustam só a ÊNFASE de dourado/vermelho já        */
/* definidos em variaveis.css, lidos via --cor-acento-primario/secundario  */
/* (definidas em temas.css, uma classe por categoria no <body>). Sem essa  */
/* classe no <body> (institucional, ou LP ainda não migrada), nenhum       */
/* destes seletores casa com nada e o visual segue exatamente como já era. */
/* ---------------------------------------------------------------------- */

body[class*="tema-"] .lp-hero__eyebrow,
body[class*="tema-"] .lp-grade-cell i {
  color: var(--cor-acento-primario, var(--cor-dourado));
}

body[class*="tema-"] .lp-header .btn--primario,
body[class*="tema-"] .lp-hero .btn--primario,
body[class*="tema-"] .formulario-captacao .btn--primario,
body[class*="tema-"] .lp-fechamento .btn--primario {
  box-shadow: 0 8px 26px color-mix(in srgb, var(--cor-acento-primario, var(--cor-dourado)) 32%, transparent);
}

body[class*="tema-"] .lp-credencial__foto::after {
  border-color: color-mix(in srgb, var(--cor-acento-primario, var(--cor-dourado)) 55%, transparent);
}

/* Vermelho é accent restrito por natureza (branding book §10.2) — nas
   categorias em que o sistema de cor pede vermelho "quase ausente" ou
   "ausente" (Kids ~1%, 40+ 0%, Emagrecimento 0%), o <mark> de ênfase usado
   em texto de objeção troca do vermelho fixo pra um tom neutro escuro, sem
   perder o negrito. Superação (~12%) e Autodefesa (~8%) mantêm o vermelho
   padrão do mark, pois a categoria já prevê esse accent emocional presente.
   Ver 02-briefing/08-sistema-cor-por-categoria-lps.md §2. */
.tema-kids .objecao__resposta mark,
.tema-40mais .objecao__resposta mark,
.tema-emagrecimento .objecao__resposta mark {
  color: var(--cor-titulo-escuro);
}