/* ==========================================================================
   Fonte de Jacó — página de bio (fontedejaco.com/bio)
   Mobile-first. Sem fontes externas, sem bibliotecas, sem requisições de rede.

   Paletas (todas extraídas dos materiais reais dos projetos):
   · Fonte de Jacó ...... 02_Engines/Visual_Asset_Engine/projects/fonte_de_jaco/theme_tokens.json
   · Mapa da Missa ...... Missa/Brasil/03_Pagina_de_Vendas/01_site_final/index.html
   · Meu Primeiro Rosário Rosario_BR/03_pagina_de_vendas/style.css (:root)
   ========================================================================== */

:root {
  /* Marca Fonte de Jacó */
  --fj-creme:   #F2E7D5;   /* creme mineral, fundo dominante */
  --fj-terra:   #C45E3F;   /* terracota queimado */
  --fj-agua:    #5EAAA3;   /* água mineral */
  --fj-ameixa:  #553849;   /* ameixa profunda, texto editorial */
  --fj-carvao:  #2E2926;   /* carvão quente, corpo de texto */

  --serif: "Sitka Banner", Constantia, Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  --largura: 1040px;
  --raio: 28px;
  --transicao: 180ms cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fj-creme);
  color: var(--fj-carvao);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* Atalho de teclado ------------------------------------------------------ */
.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--fj-ameixa);
  color: var(--fj-creme);
  padding: 12px 18px;
  z-index: 10;
  text-decoration: none;
}
.pular:focus { left: 8px; top: 8px; }

/* ==========================================================================
   CABEÇALHO
   ========================================================================== */

.cabecalho { padding: 22px 20px 0; }

.faixa {
  max-width: var(--largura);
  margin: 0 auto;
  text-align: center;
}

/* Assinatura de marca: duas bolinhas iguais, terracota + água.
   Detalhe de marca oficial, não marcador de lista. Não substituir por símbolo. */
.marca-pontos {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 9px;
}
.marca-pontos span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.marca-pontos span:first-child { background: var(--fj-terra); }
.marca-pontos span:last-child  { background: var(--fj-agua); }

.marca {
  margin: 0;
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: .01em;
  color: var(--fj-ameixa);
}

.tagline {
  margin: 9px auto 0;
  max-width: 30ch;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.38;
  color: var(--fj-carvao);
}

.intro {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--fj-ameixa);
  opacity: .82;
}

/* Fio de água: separa o cabeçalho da vitrine de produtos (função estrutural).
   O SVG tem folga interna: com 30px de altura sobram ~8px acima do primeiro
   traço e ~5px abaixo do segundo, então a linha nunca encosta no texto. */
.linha-agua {
  display: block;
  width: 100%;
  max-width: var(--largura);
  height: 30px;
  margin: 10px auto 0;
}

/* ==========================================================================
   BANNERS DE PRODUTO
   ========================================================================== */

.produtos {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 5px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.banner {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--raio);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--banner-fundo);
  box-shadow: 0 10px 26px -14px rgba(46, 41, 38, .45);
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.banner:focus-visible {
  outline: 3px solid var(--fj-carvao);
  outline-offset: 3px;
}

/* Figura primeiro no celular: o produto aparece antes da leitura */
.banner__figura {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 24px 4px;
}

.banner__figura img {
  width: auto;
  max-height: 190px;
  max-width: 100%;
  transition: transform var(--transicao);
}

/* Painel claro atrás do mockup.
   Use `banner--painel` quando o mockup do produto tiver muita área escura:
   sobre um fundo escuro ele perderia a silhueta. O mockup do Meu Primeiro
   Rosário tem cerca de 40% de área escura/azulada e precisa do painel;
   o do Mapa da Missa é claro e fica melhor direto sobre o verde. */
.banner--painel .banner__figura {
  margin: 22px 22px 0;
  padding: 20px 18px;
  border-radius: 20px;
  background: var(--banner-painel);
  box-shadow: inset 0 0 0 1px rgba(46, 41, 38, .07);
}
/* mockups quadrados precisam de mais altura para não ficarem estreitos */
.banner--painel .banner__figura img { max-height: 228px; }

.banner__texto {
  order: 2;
  padding: 18px 26px 28px;
}

.banner__chapeu {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--banner-detalhe);
}

.banner__titulo {
  margin: 0;
  font-family: var(--serif);
  font-size: 33px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.005em;
  color: var(--banner-titulo);
}

.banner__desc {
  margin: 12px 0 0;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--banner-texto);
}

.banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 22px;
  min-height: 48px;
  border-radius: 999px;
  background: var(--banner-cta-fundo);
  color: var(--banner-cta-texto);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  transition: background var(--transicao), transform var(--transicao);
}

.banner__cta svg {
  width: 22px;
  height: 11px;
  flex: 0 0 auto;
  transition: transform var(--transicao);
}

/* --- Tema 1: Mapa da Missa ---------------------------------------------
   verde profundo #1F5E3B · creme #EFE9DC · dourado #E6C877              */
.banner--missa {
  --banner-fundo: linear-gradient(158deg, #2A6E47 0%, #1F5E3B 45%, #143F27 100%);
  --banner-titulo: #EFE9DC;
  --banner-texto: #DFE8DF;
  --banner-detalhe: #E6C877;
  --banner-cta-fundo: #E6C877;
  --banner-cta-texto: #143F27;
  box-shadow: 0 12px 30px -14px rgba(20, 63, 39, .6);
}

/* --- Tema 2: Meu Primeiro Rosário --------------------------------------
   azul profundo #0F2440 → #173B63 · marfim #F7F1E6 · dourado #C9A24A    */
.banner--rosario {
  --banner-fundo: linear-gradient(158deg, #173B63 0%, #0F2440 100%);
  --banner-titulo: #F7F1E6;
  --banner-texto: #D6DEE9;
  --banner-detalhe: #C9A24A;
  --banner-cta-fundo: #C9A24A;
  --banner-cta-texto: #0F2440;
  --banner-painel: #F7F1E6;   /* marfim oficial do produto */
  box-shadow: 0 12px 30px -14px rgba(15, 36, 64, .6);
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */

.rodape {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 34px 24px 40px;
  text-align: center;
  color: var(--fj-ameixa);
}

.rodape__marca {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
}

.rodape__tag {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--fj-carvao);
  opacity: .78;
}

.rodape__links {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.rodape__links a {
  color: var(--fj-ameixa);
  font-size: 14px;
  text-underline-offset: 3px;
}

.rodape__ano {
  margin: 16px 0 0;
  font-size: 12.5px;
  opacity: .6;
}

/* ==========================================================================
   TABLET / DESKTOP
   ========================================================================== */

@media (min-width: 700px) {
  .cabecalho { padding-top: 40px; }
  .marca { font-size: 33px; }
  .tagline { font-size: 18px; max-width: 40ch; margin-top: 11px; }
  .intro { font-size: 15.5px; margin-top: 10px; }
  .linha-agua { height: 46px; margin-top: 14px; }

  .produtos { gap: 32px; padding-bottom: 12px; }

  .banner {
    flex-direction: row;
    align-items: center;
    border-radius: 32px;
    min-height: 330px;
  }

  .banner__texto {
    order: 1;
    flex: 1 1 55%;
    padding: 46px 20px 46px 52px;
  }

  .banner__figura {
    order: 2;
    flex: 1 1 45%;
    padding: 34px 44px;
    align-self: stretch;
  }

  .banner__figura img { max-height: 264px; }

  /* Ritmo visual: o segundo banner inverte a posição da imagem */
  .banner--invertido .banner__texto { order: 2; padding: 46px 52px 46px 20px; }
  .banner--invertido .banner__figura { order: 1; }

  .banner--painel .banner__figura {
    margin: 28px 34px 28px 0;
    padding: 26px 22px;
    border-radius: 24px;
    align-self: center;
  }
  .banner--painel.banner--invertido .banner__figura { margin: 28px 0 28px 34px; }

  .banner__chapeu { font-size: 12.5px; margin-bottom: 12px; }
  .banner__titulo { font-size: 46px; }
  .banner__desc { font-size: 18px; margin-top: 14px; }
  .banner__cta { margin-top: 26px; font-size: 16px; padding: 15px 26px; }

  /* Primeiro produto com destaque maior */
  .banner--missa { min-height: 372px; }
  .banner--missa .banner__titulo { font-size: 54px; }
  .banner--missa .banner__figura img { max-height: 290px; }
}

@media (min-width: 1000px) {
  .banner--missa .banner__titulo { font-size: 58px; }
  .banner--rosario .banner__titulo { font-size: 50px; }
}

/* ==========================================================================
   INTERAÇÕES
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -18px rgba(46, 41, 38, .55);
  }
  .banner:hover .banner__figura img { transform: scale(1.03); }
  .banner:hover .banner__cta svg { transform: translateX(4px); }
}

.banner:active { transform: translateY(0) scale(.995); }
.banner:active .banner__cta { filter: brightness(.94); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .banner:hover { transform: none; }
  .banner:hover .banner__figura img { transform: none; }
}