/* ==========================================================================
   CT Tarcísio Alves Jiu-Jitsu — Página Institucional (seções específicas)
   Tokens em variaveis.css · componentes reutilizáveis em componentes.css.
   Este arquivo só tem o que é único desta página: hero, zigzag "quem somos",
   bloco de credencial escuro, bento "como funciona", foto full-bleed e as
   duas faixas de CTA (meio de página e fechamento).
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* HERO — split assimétrico (texto + foto real em card), fundo escuro     */
/* ---------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--cor-preto);
  padding-block: calc(72px + clamp(2.5rem, 6vw, 5rem)) clamp(3rem, 6vw, 5rem);
  overflow: clip;
}
.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;
}
.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;
}
.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;
}
.hero__eyebrow { color: var(--cor-dourado); }
.hero__titulo {
  font-size: var(--texto-h1);
  color: var(--cor-titulo-claro);
  margin-bottom: 1.15rem;
}
.hero__subtitulo {
  max-width: 46ch;
  font-size: var(--texto-corpo-lg);
  color: var(--cor-texto-claro);
  margin-bottom: 1.9rem;
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.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;
}
/* Foto real 1600x900 (16:9) — moldura alargada pra 8:5 (~90% da largura visível) pra caber as
   duas atletas no quadro (uma foto mais alta/estreita cortava a que fica à direita). */
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero__foto-legenda {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(0deg, rgba(11,11,10,.88) 0%, rgba(11,11,10,0) 100%);
  color: var(--cor-titulo-claro);
  font-size: 0.82rem;
  font-weight: 500;
}

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

/* ---------------------------------------------------------------------- */
/* QUEM SOMOS — zigzag (foto do mestre + texto)                           */
/* ---------------------------------------------------------------------- */

.quem-somos {
  padding-block: var(--espaco-secao);
}
.quem-somos .container {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
/* Foto real em alta resolução (13/09, 914x1721 — fonte real do cliente, não mais screenshot
   de baixa resolução) é retrato de verdade — volta pro card lado-a-lado, sem forçar recorte. */
.quem-somos__foto {
  position: relative;
  border-radius: var(--raio-card);
  overflow: hidden;
  aspect-ratio: 914 / 1721;
  box-shadow: var(--sombra-suave);
}
.quem-somos__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.quem-somos__foto::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--cor-borda-clara);
  border-radius: inherit;
}
.quem-somos h2 { font-size: var(--texto-h2); color: var(--cor-titulo-escuro); margin-bottom: 1.1rem; }
.quem-somos p { max-width: var(--largura-leitura); font-size: var(--texto-corpo-lg); margin-bottom: 1rem; }
.quem-somos p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .quem-somos .container { grid-template-columns: 1fr; }
  .quem-somos__foto { max-width: 300px; margin-inline: auto; }
}

/* ---------------------------------------------------------------------- */
/* POR QUE CONFIAR — bloco escuro, centralizado, badge como centro visual */
/* ---------------------------------------------------------------------- */

.credencial {
  position: relative;
  background: var(--cor-preto);
  padding-block: var(--espaco-secao);
  overflow: clip;
  text-align: center;
}
.credencial__textura {
  position: absolute; inset: 0;
  background-image: url("../img/textura-kimono.jpg");
  background-size: cover; background-position: center;
  opacity: 0.14;
  mix-blend-mode: luminosity;
}
.credencial .container { position: relative; z-index: 1; max-width: 780px; }
.credencial__badge {
  width: 108px; height: 108px;
  margin-inline: auto 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--cor-dourado);
  display: grid; place-items: center;
  color: var(--cor-dourado);
  background: var(--cor-preto-alt);
  box-shadow: var(--sombra-dourada);
}
.credencial__badge svg { width: 54px; height: 54px; }
.credencial h2 { font-size: var(--texto-h2); margin-bottom: 1.1rem; }
.credencial p { font-size: var(--texto-corpo-lg); max-width: 60ch; margin-inline: auto 1.75rem; }
.credencial__stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--cor-borda-escura);
}
.credencial__stat strong {
  display: block;
  font-family: var(--fonte-display);
  font-size: clamp(1.75rem, 2vw, 2.5rem);
  color: var(--cor-dourado);
}
.credencial__stat span { font-size: 0.85rem; color: var(--cor-texto-claro); }

/* ---------------------------------------------------------------------- */
/* PERGUNTAS EMOCIONAIS — sempre visíveis, nunca em accordion              */
/* ---------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------- */
/* COMO FUNCIONA — bento de 4 células exatas, com variação de fundo real  */
/* ---------------------------------------------------------------------- */

.como-funciona { padding-block: var(--espaco-secao); background: var(--cor-branco-alt); }
.como-funciona > .container > h2 { font-size: var(--texto-h2); color: var(--cor-titulo-escuro); margin-bottom: 2rem; }

.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: 1.1rem;
}
.bento-cell {
  border-radius: var(--raio-card);
  padding: 1.6rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 0.5rem;
}
.bento-cell--kids { grid-column: span 2; background: var(--cor-branco); border: 1px solid var(--cor-borda-clara); color: var(--cor-texto-escuro); }
.bento-cell--adultos { grid-column: span 2; background: var(--cor-preto); color: var(--cor-texto-claro); }
.bento-cell--alunos {
  grid-column: span 1;
  background: linear-gradient(155deg, var(--cor-dourado) 0%, var(--cor-dourado-claro) 100%);
  color: var(--cor-preto);
}
.bento-cell--professor { grid-column: span 3; background: var(--cor-preto-alt); color: var(--cor-texto-claro); background-image: url("../img/textura-kimono.jpg"); background-size: cover; background-position: center; background-blend-mode: luminosity; }
.bento-cell--professor::before {
  content: ""; position: absolute; inset: 0;
}
.bento-cell--professor { position: relative; }
.bento-cell--professor > * { position: relative; z-index: 1; }
.bento-cell--professor::after {
  content: ""; position: absolute; inset: 0; background: rgba(11,11,10,.55); border-radius: inherit;
}

.bento-cell svg { width: 26px; height: 26px; color: var(--cor-dourado); margin-bottom: 0.4rem; }
.bento-cell--alunos svg, .bento-cell--adultos svg { color: currentColor; opacity: .9; }
.bento-cell strong { font-family: var(--fonte-display); font-size: 1.15rem; }
.bento-cell--alunos strong { font-size: clamp(2.4rem, 3vw, 3rem); line-height: 1; }
.bento-cell span { font-size: 0.9rem; opacity: .9; }

@media (max-width: 860px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-cell--kids, .bento-cell--adultos, .bento-cell--professor { grid-column: span 2; }
}
@media (max-width: 520px) {
  .bento { grid-template-columns: 1fr; }
  .bento-cell--kids, .bento-cell--adultos, .bento-cell--alunos, .bento-cell--professor { grid-column: span 1; }
}

/* ---------------------------------------------------------------------- */
/* FOTO FULL-BLEED — pausa visual real, entre bento e CTA de meio         */
/* ---------------------------------------------------------------------- */

.foto-treino {
  position: relative;
  min-height: clamp(320px, 46vw, 560px);
  background-image: url("../img/treino-alunas.jpg");
  background-size: cover;
  background-position: 50% 30%;
  display: flex;
  align-items: flex-end;
}
.foto-treino::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,11,10,.85) 0%, rgba(11,11,10,.15) 55%, rgba(11,11,10,.35) 100%);
}
.foto-treino .container { position: relative; z-index: 1; padding-block: 2.5rem; }
.foto-treino blockquote {
  margin: 0;
  max-width: 50ch;
  font-family: var(--fonte-display);
  font-size: clamp(1.25rem, 1.6vw + 1rem, 2rem);
  color: var(--cor-titulo-claro);
  font-weight: 500;
  line-height: 1.25;
}
.foto-treino cite {
  display: block;
  margin-top: 0.9rem;
  font-style: normal;
  font-family: var(--fonte-corpo);
  font-size: 0.88rem;
  color: var(--cor-texto-claro);
}

/* ---------------------------------------------------------------------- */
/* CTA DE MEIO DE PÁGINA — faixa clara, curta, direta                     */
/* ---------------------------------------------------------------------- */

.cta-meio {
  background: var(--cor-branco);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--cor-borda-clara);
  border-bottom: 1px solid var(--cor-borda-clara);
}
.cta-meio .container {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.75rem;
}
.cta-meio__texto { max-width: 46ch; }
.cta-meio h2 { font-size: var(--texto-h2); color: var(--cor-titulo-escuro); margin-bottom: 0.6rem; }
.cta-meio p { font-size: var(--texto-corpo-lg); }

/* ---------------------------------------------------------------------- */
/* FAQ — accordion prático                                                 */
/* ---------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------- */
/* FECHAMENTO — statement final em bloco escuro de alto contraste          */
/* ---------------------------------------------------------------------- */

.fechamento {
  position: relative;
  background: var(--cor-preto);
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  text-align: center;
  overflow: clip;
}
.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;
}
.fechamento .container { position: relative; z-index: 1; max-width: 760px; }
.fechamento h2 {
  font-size: clamp(2rem, 3vw + 1.2rem, 3.5rem);
  color: var(--cor-titulo-claro);
  margin-bottom: 1.1rem;
}
.fechamento p { font-size: var(--texto-corpo-lg); color: var(--cor-texto-claro); max-width: 52ch; margin-inline: auto 2.1rem; }