/* ============================================================
   VARIÁVEIS DE IDENTIDADE VISUAL — Brasão de São Miguel Arcanjo
   ============================================================ */
:root{
  --vermelho: #8B1E1E;
  --vermelho-escuro: #6B1414;
  --vermelho-claro: #A72B2B;
  --verde: #0E5B2E;
  --dourado: #D4AF37;
  --dourado-escuro: #B8860B;
  --ouro-claro: #F2D37A;
  --prata: #C0C0C0;
  --marfim: #F3E9D8;
  --preto: #1A1A1A;

  --grad-vermelho: linear-gradient(135deg, var(--vermelho-claro), var(--vermelho-escuro));
  --grad-dourado: linear-gradient(135deg, var(--ouro-claro), var(--dourado-escuro));

  --fonte-titulo: 'Cinzel', serif;
  --fonte-texto: 'Inter', sans-serif;

  --sombra-suave: 0 10px 40px rgba(26,26,26,0.12);
  --sombra-forte: 0 20px 60px rgba(26,26,26,0.28);

  --transicao: 0.5s cubic-bezier(.22,.61,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--fonte-texto);
  color: var(--preto);
  background: var(--marfim);
  overflow-x:hidden;
  line-height:1.65;
}

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

a{ text-decoration:none; color:inherit; }

ul{ list-style:none; }

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

section{ position:relative; }

h1,h2,h3,h4{
  font-family: var(--fonte-titulo);
  font-weight:600;
  letter-spacing:0.02em;
}

.eyebrow{
  font-family: var(--fonte-texto);
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color: var(--dourado-escuro);
  font-weight:600;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:32px;
  height:1px;
  background: var(--dourado);
  display:inline-block;
}

/* Textura de pergaminho sutil, reutilizada em várias seções */
.textura-pergaminho{
  background-image:
    radial-gradient(circle at 20% 20%, rgba(212,175,55,0.04), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(139,30,30,0.03), transparent 45%);
  background-color: var(--marfim);
}

.divisor-ornamental{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin: 28px 0;
}
.divisor-ornamental::before,
.divisor-ornamental::after{
  content:"";
  height:1px;
  width:64px;
  background: linear-gradient(90deg, transparent, var(--dourado));
}
.divisor-ornamental::after{
  background: linear-gradient(90deg, var(--dourado), transparent);
}
.divisor-ornamental span{
  color: var(--dourado);
  font-size:1.1rem;
}

.titulo-secao{
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  color: var(--vermelho-escuro);
  margin-bottom:18px;
}
.subtitulo-secao{
  color:#5a5147;
  font-weight:300;
  max-width:560px;
  margin:0 auto 60px;
}

/* Botões reutilizáveis */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 30px;
  font-family: var(--fonte-texto);
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
  position:relative;
  overflow:hidden;
}
.btn-dourado{
  background: var(--grad-dourado);
  color: var(--preto);
}
.btn-dourado::before{
  content:"";
  position:absolute;
  top:0; left:-120%;
  width:60%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
}
.btn-dourado:hover::before{ left:130%; }
.btn-dourado:hover{ transform: translateY(-2px); box-shadow: var(--sombra-suave); }

.btn-contorno-dourado{
  background: transparent;
  border-color: var(--dourado);
  color: var(--dourado);
}
.btn-contorno-dourado:hover{
  background: var(--dourado);
  color: var(--preto);
  transform: translateY(-2px);
}

.btn-vermelho{
  background: var(--grad-vermelho);
  color: var(--marfim);
}
.btn-vermelho:hover{ transform: translateY(-2px); box-shadow: var(--sombra-suave); }

/* ============================================================
   ANIMAÇÕES — sutis, respeitando prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0;
    transform: translateY(28px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.visivel{
    opacity:1;
    transform: translateY(0);
  }
  .reveal-stagger .item-stagger{
    opacity:0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.22,.61,.36,1);
  }
  .reveal-stagger.visivel .item-stagger{
    opacity:1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce){
  .reveal, .item-stagger{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}