/* ==========================================================
   MISHKAN CREATIVE | styles.css
   Brand Book 2026. Mobile-first: o básico é o celular,
   os @media (min-width) no fim ampliam para tablet e computador.
   ========================================================== */

/* ---------- 1. CORES E FONTES (troque aqui, vale para o site todo) ---------- */
:root {
  --preto: #161210;
  --offwhite: #F8F3EB;
  --ouro: #D2A46F;
  --areia: #E7D9C4;
  --pele: #C8A27E;
  --madeira: #8A6A4F;

  --f-titulo: 'Playfair Display', Georgia, serif;
  --f-script: 'Pinyon Script', cursive;
  --f-texto: 'Montserrat', Arial, sans-serif;

  --gutter: 22px;
  --max: 1080px;
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--preto);
  color: var(--offwhite);
  font-family: var(--f-texto);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ---------- 3. PEÇAS REUTILIZÁVEIS ---------- */

/* Logo: MISHKAN em serifa fina + creative em script, dourado, sem efeito */
.logo { display: inline-block; text-decoration: none; text-align: center; line-height: 1; color: var(--ouro); }
.logo__main {
  display: block;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: .04em;
}
.logo__script {
  display: block;
  font-family: var(--f-script);
  font-size: 30px;
  margin-top: -6px;
  margin-left: 58px;
}
.logo--pequeno .logo__main { font-size: 26px; }
.logo--pequeno .logo__script { font-size: 23px; margin-left: 44px; }

/* Palavra de virada em script dourado (usar com moderação) */
.script {
  font-family: var(--f-script);
  font-weight: 400;
  color: var(--ouro);
  font-size: 1.22em;
  line-height: 1;
}

/* Linha dourada fina, assinatura editorial */
.linha { width: 56px; height: 1px; background: var(--ouro); margin: 22px 0 26px; }
.linha--centro { margin-left: auto; margin-right: auto; }

/* Chamada pequena acima dos títulos */
.eyebrow {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 14px;
}
.eyebrow--escuro { color: var(--madeira); }

/* Botões grandes, fáceis de tocar */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 28px;
  border: 1px solid var(--ouro);
  border-radius: 2px;
  font-family: var(--f-texto);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.98); }
.btn--ouro { background: var(--ouro); color: var(--preto); }
.btn--ouro:hover { background: var(--offwhite); border-color: var(--offwhite); }
.btn--contorno { background: transparent; color: var(--offwhite); }
.btn--contorno:hover { background: var(--ouro); color: var(--preto); }
.btn--escuro { background: var(--preto); border-color: var(--preto); color: var(--offwhite); }
.btn--escuro:hover { background: var(--ouro); border-color: var(--ouro); color: var(--preto); }
.btn--grande { min-height: 68px; font-size: 14px; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

/* Entrada suave ao rolar (só liga se o JavaScript estiver ativo) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 4. SEÇÕES: BASE ---------- */
.secao { padding: 84px 0; }
.secao--clara { background: var(--offwhite); color: var(--preto); }
.secao--escura { background: var(--preto); color: var(--offwhite); }

.titulo {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: clamp(32px, 8.5vw, 52px);
  line-height: 1.12;
  letter-spacing: -.005em;
}
.titulo--claro { color: var(--offwhite); }
.lead {
  font-family: var(--f-titulo);
  font-size: clamp(19px, 4.8vw, 24px);
  line-height: 1.5;
  max-width: 640px;
}
.lead--claro { color: var(--areia); }

/* ---------- 5. TOPO ---------- */
.hero { background: var(--preto); padding: 34px 0 72px; }
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }

.video {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 30px 0 34px;
  aspect-ratio: 4 / 5;          /* formato do player no celular. Mude aqui se o vídeo for outro */
  background: #0d0a09;
  border: 1px solid rgba(210, 164, 111, .55);
  overflow: hidden;
}
.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.video__vazio {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(ellipse at 50% 40%, #2a2019 0%, #161210 70%);
  pointer-events: none;
}
.video--vazio video { visibility: hidden; }
.video--vazio .video__vazio { display: flex; }
.video__play {
  width: 70px; height: 70px; border: 1px solid var(--ouro); border-radius: 50%; position: relative;
}
.video__play::after {
  content: ''; position: absolute; left: 28px; top: 21px;
  border-left: 17px solid var(--ouro); border-top: 13px solid transparent; border-bottom: 13px solid transparent;
}
.video__vazio-texto { font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--pele); }

.hero__titulo {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: clamp(27px, 7.4vw, 44px);
  line-height: 1.18;
  max-width: 760px;
}
.hero__sub {
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: clamp(18px, 4.6vw, 22px);
  color: var(--areia);
  margin-top: 20px;
  max-width: 560px;
}
.caminhos { display: grid; gap: 14px; width: 100%; max-width: 440px; margin-top: 38px; }

/* ---------- 6. MÉTODO ---------- */
.pilares { display: grid; gap: 18px; margin-top: 44px; }
.pilar { border-top: 1px solid var(--ouro); padding: 22px 0 8px; }
.pilar__num { font-weight: 900; font-size: 12px; letter-spacing: .2em; color: var(--madeira); }
.pilar h3 { font-family: var(--f-titulo); font-weight: 600; font-size: 28px; margin: 8px 0 8px; }
.pilar p { color: #4a3d33; max-width: 420px; }
.fecho {
  margin-top: 52px;
  font-weight: 900; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--madeira);
}

/* ---------- 7. SERVIÇOS ---------- */
.servicos { display: grid; gap: 20px; margin-top: 44px; }
.servico {
  position: relative;
  border: 1px solid rgba(210, 164, 111, .35);
  padding: 34px 26px 30px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.servico--destaque { border-color: var(--ouro); background: linear-gradient(180deg, rgba(210,164,111,.09), rgba(210,164,111,0) 70%); }
.servico__tag { font-weight: 800; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); }
.servico__num { font-family: var(--f-titulo); font-size: 54px; line-height: 1; color: var(--ouro); font-weight: 400; }
.servico h3 { font-family: var(--f-titulo); font-weight: 600; font-size: 28px; line-height: 1.18; }
.servico p { color: var(--areia); flex: 1; }
.servico .btn { width: 100%; margin-top: 14px; }

/* ---------- 8. SOBRE ---------- */
.sobre { display: grid; gap: 36px; align-items: center; }
.sobre__marca {
  aspect-ratio: 4 / 5; max-width: 360px; width: 100%;
  background: var(--preto);
  border: 1px solid var(--ouro);
  outline: 1px solid rgba(210,164,111,.35); outline-offset: 8px;
  display: flex; align-items: center; justify-content: center;
}
.sobre__marca span { font-family: var(--f-titulo); font-size: 96px; color: var(--ouro); font-weight: 400; letter-spacing: .04em; }
.sobre__cargo { font-weight: 800; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--madeira); margin-top: 10px; }
.sobre__texto p + p { margin-top: 16px; }
.sobre__frase { font-family: var(--f-titulo); font-style: italic; font-size: 24px; margin-top: 26px !important; }

/* ---------- 9. CLIENTES ---------- */
.cases { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 44px; }
.case h3 { font-family: var(--f-titulo); font-weight: 600; font-size: 24px; margin-top: 16px; }
.case p { color: var(--pele); font-size: 14px; letter-spacing: .04em; }
.case__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid rgba(210,164,111,.4);
  background: linear-gradient(160deg, #2b211a 0%, #161210 75%);
  display: flex; align-items: center; justify-content: center;
}
.case__inicial { font-family: var(--f-titulo); font-size: 92px; color: var(--ouro); font-weight: 400; }
.case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 10. CHAMADA FINAL ---------- */
.final { padding: 100px 0 110px; }
.final__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.final .btn { width: 100%; max-width: 460px; }

/* ---------- 11. RODAPÉ ---------- */
.rodape { background: var(--preto); border-top: 1px solid rgba(210,164,111,.45); padding: 54px 0 46px; }
.rodape__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.rodape__frase { font-family: var(--f-titulo); font-style: italic; color: var(--areia); font-size: 18px; }
.rodape .btn { width: 100%; max-width: 380px; }
.rodape__insta { font-weight: 800; font-size: 13px; letter-spacing: .16em; text-decoration: none; color: var(--ouro); padding: 12px; }
.rodape__insta:hover { color: var(--offwhite); }
.rodape__legal { font-size: 11px; letter-spacing: .2em; color: var(--madeira); margin-top: 12px; }

/* ==========================================================
   TABLET E COMPUTADOR
   ========================================================== */
@media (min-width: 720px) {
  :root { --gutter: 40px; }
  .secao { padding: 112px 0; }
  .logo__main { font-size: 44px; }
  .logo__script { font-size: 38px; margin-left: 76px; }

  .video { aspect-ratio: 16 / 9; max-width: 860px; }
  .caminhos { grid-template-columns: 1fr 1fr; max-width: 640px; }

  .pilares { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .servicos { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .servico { padding: 38px 28px 32px; }

  .sobre { grid-template-columns: 5fr 7fr; gap: 72px; }
  .cases { grid-template-columns: repeat(2, 1fr); gap: 36px; }
}

@media (min-width: 1024px) {
  .cases { grid-template-columns: repeat(6, 1fr); }
  .case { grid-column: span 2; }
  .case:nth-child(4), .case:nth-child(5) { grid-column: span 3; }
  .case:nth-child(4) .case__media, .case:nth-child(5) .case__media { aspect-ratio: 16 / 10; }
  .final .btn { max-width: 520px; }
}