/* Ordem da Coroa do Ocidente — página própria da Ordem. Usa o sistema de
   /css/institucional.css (.inst-*) e acrescenta a vitrine das insígnias. */

.oc { --oc-brilho: rgba(237, 217, 138, .32); }
/* style.css torna toda imagem um bloco; centralização por margem, não por text-align. */
.oc img { margin-left: auto; margin-right: auto; }

/* ── Capa: a insígnia sobre o azul, num halo de ouro ─────────────────── */
.oc-capa { padding-top: 3.6rem; padding-bottom: 4rem; overflow: hidden; }
.oc-capa__insignia { position: relative; width: clamp(200px, 34vw, 330px); aspect-ratio: 1; margin: 2.8rem auto 3.6rem; }
.oc-capa__insignia::before { content: ""; position: absolute; inset: -22%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, var(--oc-brilho), rgba(237, 217, 138, .08) 55%, transparent 72%); }
.oc-capa__insignia::after { content: ""; position: absolute; inset: -9%; border-radius: 50%; z-index: -1;
  border: 1px solid rgba(212, 175, 90, .28); box-shadow: 0 0 0 8px rgba(212, 175, 90, .04), 0 0 0 9px rgba(212, 175, 90, .14); }
.oc-capa__insignia img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5)); }
.oc-lema { margin: 1.5rem 0 0; font-family: "Cinzel", Georgia, serif; font-size: .78rem; letter-spacing: .34em; text-transform: uppercase; color: var(--i-ouro-p); }
@media (prefers-reduced-motion: no-preference) {
  .oc-capa__insignia img { animation: oc-surge 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes oc-surge { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
}

/* ── Ficha da Ordem ──────────────────────────────────────────────────── */
.oc-ficha { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; max-width: 58rem; margin: 2.6rem auto 0;
  background: var(--i-borda-s); border-block: 1px solid var(--i-borda); }
.oc-ficha div { padding: 1.1rem 1rem; text-align: center; background: var(--i-marfim); }
.oc-ficha dt { font-family: "Cinzel", Georgia, serif; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--i-ouro); }
.oc-ficha dd { margin: .35rem 0 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.22rem; line-height: 1.3; color: var(--i-azul); }

/* ── Os graus ────────────────────────────────────────────────────────── */
.oc-graus { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; max-width: 60rem; }
.oc-grau { position: relative; display: flex; flex-direction: column; background: var(--i-papel); border: 1px solid var(--i-borda);
  outline: 1px solid var(--i-borda-s); outline-offset: -7px; padding: 1.4rem 1.1rem 1.5rem; text-align: center;
  transition: transform .35s ease, box-shadow .35s ease; }
.oc-grau:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -22px rgba(21, 32, 53, .55); }
.oc-grau__num { font-family: "Cinzel", Georgia, serif; font-size: .62rem; letter-spacing: .3em; color: var(--i-ouro); }
.oc-grau__img { height: 230px; display: flex; align-items: flex-end; justify-content: center; margin: .9rem 0 1.1rem; }
.oc-grau__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(44, 32, 22, .22)); }
.oc-grau h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.42rem; line-height: 1.15; margin: 0; color: var(--i-azul); }
.oc-grau p { margin: .55rem 0 0; font-size: .96rem; line-height: 1.5; color: var(--i-suave); }
.oc-grau--colar { background: linear-gradient(180deg, #fffaf0, var(--i-papel)); border-color: var(--i-ouro); }
.oc-grau--colar::before { content: "✦"; position: absolute; top: -.62rem; left: 50%; transform: translateX(-50%); padding: 0 .5rem;
  background: var(--i-marfim); color: var(--i-ouro); font-size: .8rem; }

/* ── Vitrines (grão-colar, placa) ────────────────────────────────────── */
.oc-vitrine { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.2rem; align-items: center; }
.oc-vitrine--inversa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.oc-vitrine--inversa .oc-vitrine__palco { order: 2; }
.oc-vitrine__palco { position: relative; display: grid; place-items: center; min-height: 420px; }
.oc-vitrine__palco::before { content: ""; position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--oc-brilho), transparent 75%); }
.inst-secao--papel .oc-vitrine__palco::before { background: radial-gradient(closest-side, rgba(184, 150, 46, .2), transparent 75%); }
.oc-vitrine__palco img { position: relative; max-width: 100%; height: auto; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .38)); }
.oc-vitrine__palco--colar img { width: 82%; }
.oc-vitrine__detalhe { display: flex; align-items: center; gap: 1.1rem; margin: 1.6rem 0 0; text-align: left; padding: .9rem 1.1rem;
  border: 1px solid rgba(212, 175, 90, .35); background: rgba(255, 255, 255, .04); }
.oc-vitrine__detalhe img { flex: 0 0 46%; width: 46%; height: auto; margin: 0; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35)); }
.oc-vitrine__detalhe figcaption { font-family: "Cinzel", Georgia, serif; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--i-ouro-c); line-height: 1.7; }
.oc-vitrine__palco--placa img { width: min(100%, 440px); }
.oc-vitrine__texto h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.12; margin: .5rem 0 1rem; }
.inst-secao--azul .oc-vitrine__texto h3 { color: #fbf6ea; }
.inst-secao--azul .oc-vitrine__texto p { color: rgba(244, 239, 228, .82); }
.oc-vitrine__texto p { font-size: 1.12rem; line-height: 1.78; }
.oc-vitrine__texto .oc-legenda { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid rgba(212, 175, 90, .35); font-family: "Cinzel", Georgia, serif;
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--i-ouro-c); }
.inst-secao--papel .oc-vitrine__texto .oc-legenda { color: var(--i-suave); border-top-color: var(--i-borda); }

/* ── Descrição heráldica e fita ──────────────────────────────────────── */
.oc-brasao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 3rem; align-items: start; }
.oc-brasao__insignia { position: sticky; top: 7rem; text-align: center; }
.oc-brasao__insignia img { width: min(100%, 360px); height: auto; filter: drop-shadow(0 16px 24px rgba(44, 32, 22, .25)); }
.oc-fita { width: min(100%, 300px); height: 54px; margin: 1.8rem auto .6rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 6px 14px -8px rgba(21, 32, 53, .6);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #b3241f 0 6%, #d9a630 6% 11%, #1f3fa3 11% 89%, #d9a630 89% 94%, #b3241f 94% 100%); }
.oc-fita + small { font-family: "Cinzel", Georgia, serif; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--i-suave); }
.oc-blasonamento { margin: 0; }
.oc-blasonamento div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1.2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--i-borda-s); }
.oc-blasonamento div:first-child { border-top: 1px solid var(--i-borda); }
.oc-blasonamento dt { font-family: "Cinzel", Georgia, serif; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--i-ouro); padding-top: .3rem; }
.oc-blasonamento dd { margin: 0; font-size: 1.08rem; line-height: 1.65; }

/* ── Investidura ─────────────────────────────────────────────────────── */
.oc-passos { list-style: none; margin: 0 auto; padding: 0; max-width: 60rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; counter-reset: passo; }
.oc-passos li { counter-increment: passo; padding: 1.6rem 1.4rem; background: var(--i-papel); border-top: 2px solid var(--i-ouro); box-shadow: inset 0 0 0 1px var(--i-borda-s); }
.oc-passos li::before { content: counter(passo, upper-roman); display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: 2rem; line-height: 1; color: var(--i-ouro); margin-bottom: .6rem; }
.oc-passos h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.3rem; margin: 0 0 .4rem; color: var(--i-azul); }
.oc-passos p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--i-suave); }

/* ── Fecho ───────────────────────────────────────────────────────────── */
.oc-fecho { text-align: center; padding: 4.4rem 1.5rem 4.8rem; }
.oc-fecho img { width: 92px; height: auto; margin-bottom: 1.2rem; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); }
.oc-fecho p { margin: 0 auto; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fbf6ea; }
.oc-fecho .inst-rot { margin-top: 1rem; color: var(--i-ouro-c); }
.oc-fecho nav { margin-top: 2rem; display: flex; gap: .6rem 1.8rem; justify-content: center; flex-wrap: wrap; }
.oc-fecho nav a { font-family: "Cinzel", Georgia, serif; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--i-ouro-p); text-decoration: none; border-bottom: 1px solid rgba(212, 175, 90, .45); padding-bottom: .2rem; }
.oc-fecho nav a:hover { color: #fff; border-bottom-color: var(--i-ouro-c); }

@media (max-width: 1000px) {
  /* Seis graus em três pares. */
  .oc-graus { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 40rem; margin: 0 auto; }
  .oc-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-vitrine, .oc-vitrine--inversa, .oc-brasao { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .oc-vitrine--inversa .oc-vitrine__palco { order: 0; }
  .oc-vitrine__palco { min-height: 0; }
  .oc-vitrine__palco--colar img { width: min(82%, 460px); }
  .oc-vitrine__palco--placa img { width: min(100%, 380px); }
  .oc-vitrine__texto { max-width: 40rem; margin: 0 auto; text-align: center; }
  .oc-vitrine__detalhe { max-width: 30rem; margin-left: auto; margin-right: auto; }
  .oc-brasao__insignia { position: static; }
  .oc-brasao__insignia img { width: min(100%, 300px); }
  .oc-passos { grid-template-columns: minmax(0, 1fr); max-width: 36rem; }
}
@media (max-width: 640px) {
  .oc-graus { gap: .8rem; }
  .oc-grau { padding: 1.1rem .8rem 1.2rem; }
  .oc-grau__img { height: 170px; }
  .oc-capa__insignia { margin-top: 2.2rem; margin-bottom: 3rem; }
  .oc-blasonamento div { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .oc-vitrine__detalhe img { width: 52%; }
}