/* =========================================================================
   SEMINARIVM LEGIS — folha de estilo
   Paleta clássica: pergaminho, tinta sépia, vermelho oxblood, ouro velho.
   Edite as variáveis abaixo para ajustar a identidade em todo o site.
   ========================================================================= */

:root{
  --pergaminho:      #14100d;   /* fundo da página (tinta-noite) */
  --pergaminho-alt:  #221b14;   /* painéis e blocos           */
  --pergaminho-esc:  #2f2519;   /* bordas suaves de bloco     */
  --tinta:           #efe6d2;   /* texto principal (creme)    */
  --tinta-suave:     #c6b99e;   /* texto secundário / metadados */
  --oxblood:         #cd4a35;   /* acento — coração / links   */
  --oxblood-esc:     #e2593f;   /* hover                      */
  --ouro:            #c9a45c;   /* filetes finos / detalhes   */
  --regua:           #3a2f22;   /* linhas divisórias          */

  --fonte-titulo: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
  --fonte-texto:  "EB Garamond", Garamond, Georgia, "Times New Roman", serif;

  --largura-leitura: 800px;
  --largura-larga:   1080px;
}

*{ box-sizing: border-box; }

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

body{
  margin:0;
  font-family: var(--fonte-texto);
  font-size: 20px;
  line-height: 1.62;
  color: var(--tinta);
  background-color: var(--pergaminho);
  /* brilho ambiente sutil sobre a tinta-noite */
  background-image:
    radial-gradient(1100px 540px at 50% -8%, rgba(201,164,92,0.07), transparent 60%),
    radial-gradient(900px 520px at 50% 112%, rgba(205,74,53,0.05), transparent 60%);
  background-attachment: fixed;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------- layout -------------------------------- */
.envelope{ max-width: var(--largura-larga); margin: 0 auto; padding: 0 24px; }
.coluna{   max-width: var(--largura-leitura); margin: 0 auto; }

/* ---------------------------- frontispício ----------------------------- */
.frontispicio{ max-width: 900px; margin: 0 auto; padding: 8px 24px 8px; text-align:center; }
/* lâmina do afresco (moldura fina, vinheta e legenda sobre a imagem) */
.fresco{ position:relative; border:1px solid var(--regua); border-radius:8px; overflow:hidden; margin:0;
  box-shadow: 0 26px 70px rgba(0,0,0,0.55); }
.fresco::after{ content:""; position:absolute; inset:0; border-radius:8px; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(201,164,92,0.28), inset 0 0 110px rgba(20,16,13,0.55); }
.fresco img{ display:block; width:100%; height:auto;
  transform-origin: 50% 42%;
  animation: fresco-vida 26s ease-in-out infinite alternate; }
@keyframes fresco-vida{
  from{ transform: scale(1.03) translate(1.2%, 0.8%); }
  to{   transform: scale(1.12) translate(-1.6%, -1.2%); }
}
/* alternância entre as duas obras (fundido suave) */
.fresco .quadro.qb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 2s ease; }
.fresco.alt .quadro.qb{ opacity:1; }
.fresco .legenda .obra{ display:grid; }
.fresco .legenda .obra .t{ grid-area:1/1; transition:opacity 2s ease; }
.fresco .legenda .obra .tb{ opacity:0; }
.fresco.alt .legenda .obra .ta{ opacity:0; }
.fresco.alt .legenda .obra .tb{ opacity:1; }
.fresco .legenda{ position:absolute; left:0; right:0; bottom:0; padding:18px 22px 14px;
  background:linear-gradient(transparent, rgba(20,16,13,0.88));
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.fresco .legenda .obra{ font-family:var(--fonte-titulo); font-style:italic; font-size:1.05rem; color:var(--tinta); }
.fresco .legenda .dados{ font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--tinta-suave); align-self:center; }

/* halo de raios atrás do emblema (capa) */
.emblema-halo{ position:relative; display:inline-block; }
.emblema-halo::before{ content:""; position:absolute; left:50%; top:50%; width:min(92vw,660px); height:min(92vw,660px);
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(201,164,92,0.10) 0deg 0.6deg, transparent 0.6deg 6deg);
  -webkit-mask:radial-gradient(circle, #000 15%, transparent 60%); mask:radial-gradient(circle, #000 15%, transparent 60%);
  animation: sl-girar 140s linear infinite; }
.emblema-halo::after{ content:""; position:absolute; left:50%; top:50%; width:min(64vw,430px); height:min(64vw,430px);
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(226,89,63,0.20), rgba(201,164,92,0.08) 45%, transparent 70%);
  animation: sl-pulsar 7s ease-in-out infinite; }
.emblema-halo img{ position:relative; z-index:1; }
@keyframes sl-girar{ from{ transform:translate(-50%,-50%) rotate(0); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes sl-pulsar{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

/* revelação ao rolar + entrada do cabeçalho */
.rev{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.rev.viva{ opacity:1; transform:none; }
.cabecalho .emblema, .cabecalho .emblema-halo{ animation: sl-entrar .9s cubic-bezier(.2,.7,.2,1) both; }
.cabecalho .marca{ animation: sl-entrar .9s .15s cubic-bezier(.2,.7,.2,1) both; }
@keyframes sl-entrar{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .rev{ opacity:1; transform:none; transition:none; }
  .emblema-halo::before, .emblema-halo::after, .cabecalho .emblema, .cabecalho .emblema-halo, .cabecalho .marca{ animation:none; }
  .fresco img{ transform:none; transition:none; animation:none; }
}
::selection{ background: rgba(205,74,53,0.35); }
.lema-central{ text-align:center; max-width: 840px; margin: 30px auto 0; font-size: 1.4rem; line-height: 1.6; color: var(--tinta); }

/* ------------------------------ cabeçalho ------------------------------ */
.cabecalho{ text-align:center; padding: 42px 24px 0; }
.cabecalho.compacto{ padding-top: 26px; }
.cabecalho .emblema.media{ width: 168px; height: 168px; margin-bottom: 14px; }

.cabecalho .emblema{
  width: 128px; height: 128px; object-fit: contain;
  border-radius: 3px;
  filter: drop-shadow(0 0 14px rgba(226,89,63,0.22));
  margin: 0 auto 10px;
  display:block;
}
.cabecalho .emblema.grande{ width: 200px; height:200px; margin-bottom: 10px; }

.marca{
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: clamp(3rem, 7vw, 5rem);
  letter-spacing: 0.14em;
  line-height: 1;
  margin: 0;
  color: var(--tinta);
  text-transform: uppercase;
}
.marca a{ color: inherit; text-decoration: none; }

.sub-marca{
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  color: var(--oxblood);
  margin: 6px 0 0;
  letter-spacing: 0.02em;
}

.lema{
  font-style: italic;
  color: var(--tinta-suave);
  margin: 10px 0 0;
  font-size: 1.02rem;
}

/* filete duplo ornamental */
.filete-duplo{
  border: none;
  height: 0;
  max-width: var(--largura-leitura);
  margin: 26px auto 0;
  border-top: 1px solid var(--ouro);
  border-bottom: 1px solid var(--ouro);
  padding-top: 3px;
}
.filete-fino{
  border:none; border-top:1px solid var(--regua);
  max-width: var(--largura-leitura); margin: 0 auto;
}

/* ------------------------------ navegação ------------------------------ */
.nav{
  text-align:center;
  padding: 16px 12px 6px;
}
.nav a{
  font-family: var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--tinta-suave);
  text-decoration: none;
  margin: 0 4px;
  padding: 4px 10px;
  display: inline-block;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav a:hover{ color: var(--oxblood); }
.nav a.ativo{ color: var(--oxblood); border-bottom-color: var(--oxblood); }
.nav .separador{ color: var(--regua); }

/* ------------------------------ conteúdo ------------------------------- */
main{ padding: 40px 24px 20px; }

h1,h2,h3{ font-family: var(--fonte-titulo); font-weight: 600; color: var(--tinta); line-height: 1.15; }

.titulo-secao{
  text-align:center;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.03em;
  margin: 0 0 6px;
}
.intro-secao{
  text-align:center;
  font-style: italic;
  color: var(--tinta-suave);
  max-width: 620px;
  margin: 0 auto 40px;
}

a{ color: var(--oxblood); text-decoration: none; }
a:hover{ color: var(--oxblood-esc); text-decoration: underline; text-underline-offset: 3px; }

/* --------- hero da capa (duas colunas) --------- */
.hero{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items:center;
  margin: 22px auto 8px;
}
.hero-fresco{ margin:0; }
.hero-fresco .moldura{
  display:block; padding:7px; background:var(--pergaminho-alt);
  border:1px solid var(--ouro); border-radius:3px;
  box-shadow:0 16px 40px rgba(0,0,0,0.5);
}
.hero-fresco img{ display:block; width:100%; height:auto; border:1px solid rgba(0,0,0,0.4); border-radius:2px; }
.hero-fresco figcaption{ text-align:center; font-style:italic; color:var(--tinta-suave); font-size:0.82rem; margin-top:10px; }
.hero-texto .hero-lema{ font-size:1.24rem; line-height:1.6; margin:0 0 30px; }
.hero-texto .hero-lema::first-letter{ }
.mini-titulo{ font-family:var(--fonte-titulo); font-weight:600; font-size:1.7rem; margin:0 0 4px; }

/* lista compacta (últimas publicações no hero) */
.lista-textos.compacta{ margin:0; }
.lista-textos.compacta .item{ padding:14px 0; }
.lista-textos.compacta .item:first-child{ border-top:1px solid var(--regua); }
.lista-textos.compacta .item h3{ font-size:1.35rem; }
.lista-textos.compacta .item .resumo{ display:none; }

/* --------- grade de seções (capa) --------- */
.grade{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin: 12px auto 8px;
}
.cartao{
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--tinta);
  background: linear-gradient(180deg, #241d15 0%, #1b1510 100%);
  border: 1px solid var(--pergaminho-esc);
  padding: 40px 30px 36px;
  border-radius: 3px;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cartao::before{
  content:"";
  position:absolute; inset: 7px;
  border: 1px solid rgba(154,123,56,0.40);
  border-radius: 2px;
  pointer-events:none;
  transition: border-color .18s ease;
}
.cartao:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.5);
  border-color: var(--ouro);
}
.cartao:hover::before{ border-color: rgba(226,89,63,0.45); }
.cartao .algarismo{
  display: block;
  font-family: var(--fonte-titulo);
  font-style: italic;
  color: var(--ouro);
  font-size: 1rem;
  letter-spacing: 0.22em;
  margin-bottom: 8px;
}
.cartao h3{
  margin: 0; font-size: 2.3rem; letter-spacing: 0.02em; line-height: 1.1;
  transition: color .18s ease;
}
.cartao .algarismo{ font-size: 1.1rem; }
.cartao:hover h3{ color: var(--oxblood); }
.cartao h3::after{
  content:""; display:block; width: 46px; height: 0;
  border-top: 1px solid var(--ouro);
  margin: 14px auto 0;
}

/* --------- busca e coleções --------- */
.busca-wrap{ max-width: var(--largura-leitura); margin: 0 auto 24px; }
.busca{ width:100%; font-family: var(--fonte-texto); font-size:1.1rem; color:var(--tinta);
  background:#1e1811; border:1px solid var(--regua); border-radius:5px; padding:13px 18px; }
.busca:focus{ outline:none; border-color:var(--oxblood); box-shadow:0 0 0 3px rgba(205,74,53,0.15); }
.resultados{ display:none; }
.resultados.show{ display:block; }
.colecao-secao{ font-family:var(--fonte-titulo); font-weight:600; font-size:1.55rem; text-align:center; color:var(--oxblood); margin:36px 0 0; }
.colecao-secao::after{ content:""; display:block; width:40px; border-top:1px solid var(--ouro); margin:10px auto 6px; }

/* --------- índice de coleções (páginas de seção) --------- */
.lista-colecoes{ list-style:none; padding:0; max-width: var(--largura-leitura); margin: 0 auto; }
.lista-colecoes .colecao-item{ border-bottom:1px solid var(--regua); padding:26px 0; text-align:center; }
.lista-colecoes .colecao-item:first-child{ border-top:1px solid var(--regua); }
.lista-colecoes .colecao-item .conta{ color:var(--ouro); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.16em; }
.lista-colecoes .colecao-item h3{ font-family:var(--fonte-titulo); font-weight:600; font-size:2rem; margin:4px 0 0; }
.lista-colecoes .colecao-item h3 a{ color:var(--tinta); text-decoration:none; }
.lista-colecoes .colecao-item h3 a:hover{ color:var(--oxblood); }
.lista-colecoes .colecao-item .desc{ color:var(--tinta-suave); margin:8px auto 0; max-width:560px; }

/* --------- lista de textos (páginas de seção) --------- */
.lista-textos{ list-style:none; padding:0; margin: 0 auto; max-width: var(--largura-leitura); }
.item{
  padding: 22px 0;
  border-bottom: 1px solid var(--regua);
}
.item:first-child{ border-top: 1px solid var(--regua); }
.item h3{ margin: 0 0 5px; font-size: 1.9rem; }
.item h3 a{ color: var(--tinta); }
.item h3 a:hover{ color: var(--oxblood); text-decoration:none; }
.item .meta{
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--tinta-suave); margin: 0 0 8px;
}
.item .meta .tipo{ color: var(--oxblood); }
.item .resumo{ margin: 0; color: var(--tinta); font-size: 1.14rem; }

.aviso-modelo{
  max-width: var(--largura-leitura);
  margin: 0 auto 30px;
  background: rgba(154,123,56,0.09);
  border: 1px dashed var(--ouro);
  border-radius: 3px;
  padding: 14px 20px;
  font-size: 0.92rem;
  color: var(--tinta-suave);
  font-style: italic;
}
.aviso-modelo strong{ color: var(--oxblood); font-style: normal; }

/* --------- imagem de capa do texto --------- */
.capa-artigo{ text-align:center; margin: 26px auto 6px; max-width: 620px; }
.capa-artigo .moldura{ display:inline-block; padding:7px; background:var(--pergaminho-alt); border:1px solid var(--ouro); border-radius:3px; box-shadow:0 12px 30px rgba(0,0,0,0.5); max-width:100%; }
.capa-artigo img{ display:block; width:100%; height:auto; border:1px solid rgba(0,0,0,0.4); border-radius:2px; }

/* --------- página de leitura (texto individual) --------- */
.artigo{ max-width: var(--largura-leitura); margin: 0 auto; }
.artigo .rotulo-tipo{
  text-align:center;
  font-family: var(--fonte-titulo);
  text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 0.8rem; color: var(--oxblood); margin: 0 0 10px;
}
.artigo h1{
  text-align:center; font-size: clamp(2.3rem, 5.4vw, 3.2rem);
  margin: 0 0 6px; letter-spacing: 0.01em;
}
.artigo .subtitulo{
  text-align:center; font-style: italic; color: var(--tinta-suave);
  font-size: 1.32rem; margin: 0 0 18px;
}
.artigo .meta-artigo{
  text-align:center; font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--tinta-suave);
  margin: 0 0 4px;
}
.artigo .corpo{ margin-top: 32px; font-size: 22px; line-height: 1.72; }
.artigo .corpo p{ margin: 0 0 1.15em; text-align: justify; hyphens: auto; }
.artigo .corpo.capitular > p:first-of-type::first-letter{
  font-family: var(--fonte-titulo);
  font-size: 3.4em; line-height: 0.8; float: left;
  padding: 6px 10px 0 0; color: var(--oxblood); font-weight: 600;
}
.artigo .corpo h2{ font-size: 1.6rem; margin: 1.6em 0 0.4em; }
.artigo blockquote{
  margin: 1.4em 0; padding: 4px 24px; border-left: 3px solid var(--ouro);
  font-style: italic; color: var(--tinta-suave);
}
.ornamento{ text-align:center; color: var(--ouro); font-size: 1.4rem; margin: 34px 0; letter-spacing: 0.4em; }

.notas{ margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--regua); font-size: 0.92rem; color: var(--tinta-suave); }
.notas h2{ font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.14em; }
.notas ol{ padding-left: 1.2em; }

.voltar{ display:inline-block; margin-top: 36px; font-family: var(--fonte-titulo); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; }

/* ------------------------------- rodapé -------------------------------- */
.rodape{
  text-align:center;
  margin-top: 60px;
  padding: 34px 24px 46px;
  border-top: 1px solid var(--regua);
  color: var(--tinta-suave);
  font-size: 0.9rem;
}
.rodape .emblema-mini{ width: 54px; height:54px; object-fit:contain; opacity: 0.85; margin-bottom: 8px; }
.rodape .lema-rodape{ font-family: var(--fonte-titulo); font-style: italic; color: var(--oxblood); font-size: 1.05rem; margin: 4px 0 12px; letter-spacing: 0.02em; }
.rodape a{ color: var(--tinta-suave); }
.rodape a:hover{ color: var(--oxblood); }

/* ------------------------------ responsivo ----------------------------- */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; gap: 30px; }
  .hero-fresco{ max-width: 560px; margin: 0 auto; }
  .grade{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px){
  body{ font-size: 18px; }
  .grade{ grid-template-columns: 1fr; }
  .cabecalho .emblema.grande{ width: 190px; height: 190px; }
  .nav a{ font-size: 0.85rem; letter-spacing: 0.1em; margin: 0 1px; padding: 4px 6px; }
  .nav .separador{ display:none; }
}