/* Ritual do Olorum — estilo Art Nouveau, tema mar.
   Paleta e tipografia iguais às dos slides. */

:root {
  --mar: #0F3B44;          /* azul-petróleo profundo */
  --mar-2: #134952;
  --mar-3: #1F5E5A;        /* verde-mar */
  --creme: #F3EBDD;        /* fundo claro */
  --perola: #FAF5EC;       /* cards */
  --ouro: #B8893B;         /* linhas sobre fundo claro */
  --ouro-claro: #D9B36A;   /* linhas e destaques sobre fundo escuro */
  --ouro-texto: #8A6420;   /* texto pequeno dourado sobre claro */
  --texto: #3A5458;
  --texto-claro: #CFE0DA;
  --discreto: #56696B;

  --display: 'Federo', Georgia, serif;
  --corpo: 'EB Garamond', Georgia, serif;
  --largura: 1180px;
  --raio-arco: 999px 999px 14px 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--mar);
  font-family: var(--corpo);
  font-size: 20px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ouro-texto); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: clamp(3rem, 8vw, 6rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h3 { font-size: 1.6rem; }
p { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--corpo);
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ouro-texto);
  margin-bottom: .6em;
}
.center { text-align: center; }
.center-block { margin-left: auto; margin-right: auto; }
.ornament { width: 220px; height: 14px; margin: .4em 0 1.4em; }
.section-head.center .ornament, .ornament.center-block, .center .ornament { margin-left: auto; margin-right: auto; }
.narrow { max-width: 760px; margin: 0 auto; }
.loading, .nota { color: var(--discreto); font-style: italic; }
.fonte { font-size: .85rem; color: var(--discreto); }

/* ---------- cabeçalho e rodapé ---------- */

.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem clamp(1rem, 4vw, 3rem);
  background: rgba(15, 59, 68, .96);
  border-bottom: 2px solid var(--ouro-claro);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--creme); font-family: var(--display); font-size: 1.3rem; }
.site-header nav { display: flex; gap: 1.4rem; }
.site-header nav a { color: var(--texto-claro); text-decoration: none; font-size: 1rem; letter-spacing: .05em; }
.site-header nav a:hover { color: var(--ouro-claro); }

.site-footer {
  background: var(--mar); color: var(--texto-claro);
  text-align: center; padding: 2.5rem 1rem;
  border-top: 2px solid var(--ouro-claro);
}
.site-footer a { color: var(--ouro-claro); }

/* ---------- moldura art nouveau (seções) ---------- */

.section {
  position: relative;
  max-width: var(--largura);
  margin: 4rem auto;
  padding: 4rem clamp(1.2rem, 4vw, 3.5rem);
  border: 2px solid var(--ouro);
  outline: 1px solid var(--ouro);
  outline-offset: -12px;
  border-radius: 6px;
}
.section::before, .section::after {
  content: ""; position: absolute; width: 90px; height: 90px;
  background: url("../img/canto.svg") no-repeat center / contain;
  pointer-events: none;
}
.section::before { top: -2px; left: -2px; }
.section::after { bottom: -2px; right: -2px; transform: rotate(180deg); }

.section-dark, .section-mar {
  background: var(--mar); color: var(--creme);
  border-color: var(--ouro-claro); outline-color: var(--ouro-claro);
}
.section-mar { background: var(--mar-3); }
.section-dark .eyebrow, .section-mar .eyebrow { color: var(--ouro-claro); }
.section-dark p, .section-mar p { color: var(--texto-claro); }
.section-dark::before, .section-dark::after,
.section-mar::before, .section-mar::after { background-image: url("../img/canto-claro.svg"); }

/* ---------- hero ---------- */

.hero {
  position: relative; overflow: hidden;
  background: var(--mar) url("../img/ondas.svg") no-repeat bottom center / max(100%, 1100px) auto;
  color: var(--creme);
  min-height: 78vh;
  display: flex; align-items: center; justify-content: center; gap: 3rem;
  padding: 5rem clamp(1.2rem, 6vw, 6rem) 9rem;
  border-bottom: 3px solid var(--ouro-claro);
}
.hero .eyebrow { color: var(--ouro-claro); }
.hero-text { max-width: 640px; }
.hero .lead { font-size: 1.5rem; font-style: italic; color: var(--texto-claro); }
.saudacao { font-family: var(--display); font-size: 1.8rem; color: var(--ouro-claro) !important; }
.hero-img { flex: 0 1 440px; }
.halo {
  aspect-ratio: 1; border-radius: 50%;
  background: var(--mar-2);
  border: 3px solid var(--ouro-claro);
  outline: 1px solid var(--ouro-claro); outline-offset: 10px;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  padding: 1.5rem 2rem 0;
}
.halo img { width: 80%; }

.btn {
  display: inline-block; padding: .7rem 2rem;
  border: 2px solid var(--ouro-claro); border-radius: 999px;
  color: var(--creme); text-decoration: none; font-family: var(--display); letter-spacing: .08em;
}
.btn:hover { background: var(--ouro-claro); color: var(--mar); }

/* ---------- cards ---------- */

.card {
  background: var(--perola);
  border: 2px solid var(--ouro);
  padding: 2rem 1.8rem 1.6rem;
}
.card p { color: var(--texto); }
.card.arch { border-radius: var(--raio-arco); padding-top: 3.2rem; text-align: center; }
.card.leaf { border-radius: 4px 40px 4px 40px; border-left: 8px solid var(--mar); }
.card.dark { background: var(--mar); color: var(--creme); }
.card.dark p { color: var(--texto-claro); }
.card.dark .eyebrow, .card.dark strong { color: var(--ouro-claro); }
.card .icone { width: 110px; height: 90px; object-fit: contain; margin: 0 auto 1rem; }
.card h3.grande { font-size: 2.4rem; }

.grid-2, .grid-3, .grid-4, .grid-ervas, .grid-orixas { display: grid; gap: 1.6rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-ervas { grid-template-columns: repeat(5, 1fr); }
.grid-orixas { grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: center; }

.polo-img { width: 180px; height: 240px; object-fit: contain; margin: 0 auto 1rem; }

.erva { margin: 0; padding: 2.4rem 1rem 1rem; }
.erva img { width: 120px; height: 150px; object-fit: contain; margin: 0 auto .6rem; }
.erva figcaption { font-weight: 600; font-size: 1.1rem; }
.notas-ervas { margin-top: 1.6rem; }

/* card de orixá na home */
.card-orixa {
  display: block; text-decoration: none; text-align: center; color: var(--mar);
  background: var(--perola); border: 2px solid var(--ouro);
  border-radius: var(--raio-arco); padding: 2.2rem 1.4rem 1.6rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-orixa:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(15, 59, 68, .18); }
.card-orixa-img {
  width: 190px; aspect-ratio: 1; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--mar-2); border: 2px solid var(--ouro);
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden; padding: 1rem 1.4rem 0;
}
.card-orixa h3 { font-size: 2rem; margin-bottom: .2em; }
.card-orixa-titulo { font-style: italic; color: var(--texto); }
.card-orixa-saudacao { font-family: var(--display); color: var(--ouro-texto); margin-bottom: .3em; }
.card-orixa-data { font-size: .85rem; color: var(--discreto); margin: 0; }

/* ---------- ficha ---------- */

.ficha { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; }
.ficha table { width: 100%; border-collapse: collapse; border-top: 3px solid var(--ouro); border-bottom: 3px solid var(--ouro); }
.ficha th, .ficha td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid #D9C49A; }
.ficha tr:nth-child(odd) { background: var(--perola); }
.ficha th { font-family: var(--display); font-weight: 400; color: var(--ouro-texto); width: 32%; }
.ficha td { color: var(--texto); }
.cores { text-align: center; }
.cores-lista { display: flex; justify-content: center; gap: 1.2rem; }
.cor { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .9rem; color: var(--texto); }
.bolinha { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ouro); }

/* ---------- slides ---------- */

.slides-wrap { max-width: 960px; margin: 0 auto; }
.slides-pdf {
  width: 100%; aspect-ratio: 16 / 9.4;
  border: 3px solid var(--ouro); border-radius: 8px; background: var(--mar);
}

/* ---------- itãs ---------- */

.itas { display: grid; gap: 2rem; }
.ita {
  border: 1px solid var(--ouro-claro); border-radius: 4px 48px 4px 48px;
  padding: 2rem 2.2rem; background: var(--mar-2);
}
.ita h3 { color: var(--creme); font-size: 2rem; }
.ita .fecho { font-style: italic; font-size: 1.4rem; color: var(--ouro-claro) !important; }
.ita .fonte { color: #A9C3BE !important; margin: 0; }

.pergunta { font-size: clamp(2.2rem, 5vw, 3.8rem); color: var(--creme); }

/* ---------- erro ---------- */

.erro { max-width: 640px; margin: 6rem auto; text-align: center; padding: 0 1rem; }

/* ---------- responsivo ---------- */

@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-ervas { grid-template-columns: repeat(3, 1fr); }
  .ficha { grid-template-columns: 1fr; }
  .hero { flex-direction: column; text-align: center; }
  .hero .ornament { margin-left: auto; margin-right: auto; }
  .hero-img { flex-basis: auto; width: min(360px, 80vw); }
}
@media (max-width: 640px) {
  body { font-size: 18px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-ervas { grid-template-columns: repeat(2, 1fr); }
  .site-header nav { gap: .9rem; }
  .site-header nav a { font-size: .9rem; }
  .brand span { font-size: 1.05rem; }
  .section { margin: 2.5rem .8rem; padding: 3rem 1.2rem; }
  .slides-pdf { aspect-ratio: 3 / 4; }
}