/* WRECKED Guild. Folha de estilo única do site.
   Paleta e arte vêm do site original (preto, ouro, brasa, rubro do logo, madeira). */

@font-face{font-family:"Pirata One";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/pirata-one-400.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/alegreya-sans-400.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/alegreya-sans-400i.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/alegreya-sans-500.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/alegreya-sans-700.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/alegreya-sans-800.woff2) format("woff2")}

:root{
  --tinta:#07090c;
  --mar:#0c1821;
  --painel:rgba(10,14,19,.78);
  --ouro:#f2a33a;
  --ouro-claro:#ffd596;
  --brasa:#cf3f0d;
  --brasa-escura:#a82e08;
  --rubro:#e0303a;
  --texto:#f1eadc;
  --texto-suave:#cfc5b3;
  --linha:rgba(242,163,58,.3);
  --linha-fraca:rgba(242,163,58,.16);
  --raio:14px;
  --topo:76px;
  --titulo:"Pirata One","Alegreya Sans",Georgia,serif;
  --corpo:"Alegreya Sans","Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --largura:1180px;
  --leitura:68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tinta);color:var(--texto);font:400 1.125rem/1.65 var(--corpo);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--ouro-claro);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong,b{font-weight:700;color:#fff}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
a,button{-webkit-tap-highlight-color:transparent}

.pular{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ouro);color:#1a1005;padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.pular:focus{top:12px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.conteudo{width:min(100%,var(--largura));margin-inline:auto}
.estreito{width:min(100%,860px);margin-inline:auto}
.centro{text-align:center}

/* ---------- Topo ---------- */
.topo{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--topo);background:linear-gradient(rgba(4,5,7,.92),rgba(4,5,7,.74));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s,background .25s}
.topo.rolou{border-bottom-color:var(--linha-fraca);box-shadow:0 10px 30px -12px #000;background:rgba(4,5,7,.94)}
.topo__dentro{height:100%;width:min(100%,var(--largura));margin-inline:auto;padding-inline:20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.topo__nav{display:flex;gap:6px;align-items:center}
.topo__nav a{position:relative;padding:8px 12px;color:var(--texto);text-decoration:none;font-weight:500;font-size:1.02rem;border-radius:8px;white-space:nowrap}
.topo__nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--ouro);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.topo__nav a:hover::after,.topo__nav a[aria-current="page"]::after{transform:scaleX(1)}
.topo__nav a[aria-current="page"]{color:var(--ouro-claro)}
.topo__logo{display:block;line-height:0;justify-self:center;border-radius:50%;transition:transform .25s}
.topo__logo:hover{transform:scale(1.06) rotate(-3deg)}
.topo__logo img{width:60px;height:60px;filter:drop-shadow(0 2px 10px rgba(224,48,58,.45))}
.topo__acoes{display:flex;gap:10px;align-items:center;justify-self:end}
.topo__idioma{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:38px;padding:0 10px;border:1px solid var(--linha);border-radius:999px;color:var(--ouro-claro);text-decoration:none;font-weight:700;font-size:.9rem;letter-spacing:.06em}
.topo__idioma:hover{background:rgba(242,163,58,.12)}
.topo__menu{display:none;width:46px;height:46px;border:1px solid var(--linha);background:transparent;border-radius:12px;cursor:pointer;align-items:center;justify-content:center}
.topo__menu span,.topo__menu span::before,.topo__menu span::after{display:block;width:20px;height:2px;background:var(--ouro-claro);border-radius:2px;transition:transform .25s,opacity .2s}
.topo__menu span{position:relative}
.topo__menu span::before,.topo__menu span::after{content:"";position:absolute;left:0}
.topo__menu span::before{top:-6px}
.topo__menu span::after{top:6px}
.topo__menu[aria-expanded="true"] span{background:transparent}
.topo__menu[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.topo__menu[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  :root{--topo:68px}
  .topo__dentro{grid-template-columns:auto 1fr}
  .topo__logo{justify-self:start;order:-1}
  .topo__logo img{width:52px;height:52px}
  .topo__menu{display:inline-flex}
  .topo__nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:10px 16px 18px;background:#050608;border-bottom:1px solid var(--linha);box-shadow:0 24px 40px -20px #000;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility 0s .2s}
  .topo__nav.aberto{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s}
  .topo__nav a{padding:14px 10px;font-size:1.15rem;border-bottom:1px solid var(--linha-fraca);border-radius:0}
  .topo__nav a::after{display:none}
  .topo__acoes .botao span.longo{display:none}
}
@media (max-width:420px){.topo__acoes .botao{padding:.62em 1em}}

/* ---------- Botões ---------- */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.78em 1.5em;border-radius:999px;font:700 1.04rem/1.1 var(--corpo);letter-spacing:.02em;color:#fff;background:linear-gradient(var(--brasa),var(--brasa-escura));border:1.5px solid var(--ouro);box-shadow:0 8px 22px -8px rgba(207,63,13,.75),inset 0 1px 0 rgba(255,255,255,.2);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,filter .15s;-webkit-tap-highlight-color:transparent}
.botao:hover{color:#fff;transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 12px 26px -8px rgba(207,63,13,.9),inset 0 1px 0 rgba(255,255,255,.2)}
.botao:active{transform:translateY(0) scale(.98)}
.botao svg{width:1.25em;height:1.25em;flex:none;fill:currentColor}
.botao--menor{padding:.62em 1.15em;font-size:.98rem}
.botao--maior{padding:.95em 1.9em;font-size:1.14rem}
.botao--vazado{background:rgba(7,9,12,.6);color:var(--ouro-claro);box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.botao--vazado:hover{color:#fff;background:rgba(242,163,58,.16);box-shadow:none}
.botao[aria-disabled="true"]{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);border-style:dashed;color:var(--texto-suave);box-shadow:none;cursor:default;pointer-events:none}
.botoes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.botoes--esq{justify-content:flex-start}

/* ---------- Títulos e ornamentos ---------- */
.sobretitulo{display:inline-flex;align-items:center;gap:.8em;margin:0 0 18px;font-weight:700;font-size:.86rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-claro)}
.sobretitulo::before,.sobretitulo::after{content:"";width:28px;height:1px;background:var(--linha)}
.sobretitulo--esq::before{display:none}
.titulo-capa{font:400 clamp(2.5rem,6.2vw,4.7rem)/1.04 var(--titulo);letter-spacing:.012em;color:var(--ouro);text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 46px rgba(242,163,58,.22)}
.titulo{font:400 clamp(2.1rem,4.4vw,3.2rem)/1.08 var(--titulo);letter-spacing:.012em;color:var(--ouro);text-shadow:0 2px 0 rgba(0,0,0,.5)}
.titulo--menor{font-size:clamp(1.7rem,3.2vw,2.3rem)}
.subtitulo{font:400 clamp(1.45rem,2.6vw,1.85rem)/1.15 var(--titulo);letter-spacing:.015em;color:var(--ouro)}
.ornamento{display:flex;align-items:center;justify-content:center;gap:12px;margin:16px auto 26px;color:var(--ouro)}
.ornamento::before,.ornamento::after{content:"";width:min(90px,18vw);height:1px;background:linear-gradient(90deg,transparent,var(--ouro))}
.ornamento::after{transform:scaleX(-1)}
.ornamento svg{width:26px;height:26px;fill:currentColor;flex:none}
.ornamento--esq{justify-content:flex-start;margin-inline:0}
.ornamento--esq::before{display:none}
.chamada{font-size:1.2rem;color:var(--texto)}
.destaque{font-style:italic;font-weight:500;color:var(--ouro-claro)}
.fecho{margin-top:28px;padding:18px 22px;border-left:3px solid var(--ouro);background:linear-gradient(90deg,rgba(242,163,58,.1),transparent);border-radius:0 10px 10px 0;font-style:italic;font-weight:500;color:var(--ouro-claro)}

/* ---------- Capa (home) ---------- */
.capa{position:relative;isolation:isolate;min-height:min(94vh,900px);display:grid;place-items:center;padding:calc(var(--topo) + 56px) 20px 96px;text-align:center;overflow:hidden}
.capa__arte{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.capa::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(80% 70% at 50% 46%,rgba(7,9,12,.74) 0%,rgba(7,9,12,.5) 55%,rgba(7,9,12,.2) 100%),
  linear-gradient(180deg,rgba(7,9,12,.55) 0%,rgba(7,9,12,0) 26%,rgba(7,9,12,0) 62%,rgba(7,9,12,.96) 100%)}
.capa__texto{width:min(100%,900px)}
.capa__texto .chamada{max-width:44em;margin:22px auto 14px;font-size:clamp(1.12rem,1.6vw,1.3rem);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.capa__lema{margin:0 0 30px;font-style:italic;color:var(--ouro-claro);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.capa__seta{position:absolute;left:50%;bottom:26px;translate:-50% 0;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--linha);border-radius:50%;color:var(--ouro-claro);background:rgba(7,9,12,.5)}
.capa__seta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- Seções com arte de fundo ---------- */
.secao{position:relative;isolation:isolate;padding:clamp(64px,9vw,116px) 20px;background:var(--tinta)}
.secao--abre{padding-top:calc(var(--topo) + clamp(40px,6vw,76px))}
.secao--arte::before{content:"";position:absolute;inset:0;z-index:-2;background:#07090c center/cover no-repeat}
.secao--arte::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(115% 95% at 50% 50%,rgba(7,9,12,.93) 0%,rgba(7,9,12,.88) 52%,rgba(7,9,12,.7) 100%)}
.secao--clara::after{background:radial-gradient(115% 95% at 50% 55%,rgba(7,9,12,.8) 0%,rgba(7,9,12,.62) 55%,rgba(7,9,12,.38) 100%)}
/* As regras de cada arte de fundo ([data-fundo]) são geradas pelo build.py no fim deste arquivo. */
@media (min-width:1000px) and (hover:hover) and (prefers-reduced-motion:no-preference){.secao--arte::before{background-attachment:fixed}}
.secao__cabeca{width:min(100%,780px);margin:0 auto clamp(30px,4vw,48px);text-align:center}
.secao__cabeca p{color:var(--texto)}

.tabua{position:relative;z-index:1;height:38px;background:#2a180c url(../img/textura-tabua.webp) center/auto 100% repeat-x;box-shadow:inset 0 7px 10px -5px rgba(0,0,0,.85),inset 0 -7px 10px -5px rgba(0,0,0,.85),0 0 0 1px #000}

/* ---------- Molduras de madeira ---------- */
.moldura{position:relative;display:block;margin:0;padding:10px;background:#3a2414 url(../img/textura-madeira.webp) center/300px;border-radius:12px;box-shadow:0 22px 44px -20px #000,inset 0 0 0 1px rgba(255,213,150,.2),inset 0 0 22px rgba(0,0,0,.6)}
.moldura>img:not(.moldura__mascote),.moldura>a>img,.moldura>.video,.moldura>iframe{display:block;width:100%;border-radius:5px;background:#000}
.moldura>a{display:block;border-radius:5px}
.moldura figcaption{padding:10px 6px 2px;font-size:.98rem;font-style:italic;line-height:1.4;color:#f6e6c8;text-shadow:0 1px 2px #000}
.moldura--mascote{margin-bottom:34px}
.moldura__mascote{position:absolute;right:-18px;bottom:-40px;width:clamp(96px,13vw,132px);height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.75));pointer-events:none}
.moldura--inclina-e{transform:rotate(-1.2deg)}
.moldura--inclina-d{transform:rotate(1.1deg)}
.moldura--inclina-e,.moldura--inclina-d{transition:transform .3s}
.moldura--inclina-e:hover,.moldura--inclina-d:hover{transform:none}
.ampliar{cursor:zoom-in}

/* ---------- Vídeo sob clique ---------- */
.video{position:relative;aspect-ratio:16/9;overflow:hidden}
.video img,.video iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.video__tocar{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;border:0;background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.4));cursor:pointer}
.video__tocar span{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(var(--brasa),var(--brasa-escura));border:2px solid var(--ouro);box-shadow:0 10px 30px rgba(0,0,0,.6);transition:transform .2s}
.video__tocar:hover span{transform:scale(1.08)}
.video__tocar svg{width:30px;height:30px;fill:#fff;margin-left:5px}

/* ---------- Grades ---------- */
.grade{display:grid;gap:clamp(18px,2.4vw,28px)}
.grade--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grade--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grade--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.duas{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center}
.duas--topo{align-items:start}
@media (max-width:1000px){.grade--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.grade--3{grid-template-columns:1fr}.duas{grid-template-columns:1fr}}
@media (max-width:620px){.grade--2,.grade--4{grid-template-columns:1fr}}

/* ---------- Cartões ---------- */
.cartao{display:flex;flex-direction:column;background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 20px 40px -24px #000;transition:transform .25s,border-color .25s,box-shadow .25s}
.cartao:hover{transform:translateY(-5px);border-color:var(--ouro);box-shadow:0 26px 46px -22px #000,0 0 0 1px rgba(242,163,58,.25)}
.cartao__arte{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.cartao__corpo{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.cartao__corpo p{font-size:1.04rem;line-height:1.55;color:var(--texto)}
.cartao__corpo .botao{margin-top:auto;align-self:flex-start}
.cartao__nota{font-style:italic;font-weight:700;color:var(--ouro-claro)}

.painel{padding:clamp(22px,3vw,34px);background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.painel>.subtitulo{margin-bottom:12px}

/* Guias da Academia: mascote + autor */
.guia{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px 22px;align-items:center;padding:26px;background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .25s,border-color .25s}
.guia:hover{transform:translateY(-4px);border-color:var(--ouro)}
.guia__mascote{width:112px;height:112px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#24455a,#0c1821 70%);border:2px solid var(--ouro);padding:8px;object-fit:contain;box-shadow:0 10px 22px -10px #000}
.guia__texto p{font-weight:500;font-size:1.12rem;line-height:1.45;color:#fff;margin-bottom:8px}
.guia__autor{font-size:.98rem;color:var(--texto-suave)}
.guia__autor b{color:var(--ouro-claro)}
.guia .botao{grid-column:1/-1;justify-self:start}
@media (max-width:480px){.guia{grid-template-columns:1fr;text-align:center;justify-items:center}.guia .botao{justify-self:center}}

/* Criadores */
.criador{display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 24px;background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.criador img{width:128px;height:128px;border-radius:18px;border:2px solid var(--ouro);object-fit:cover;background:#000}
.criador__nome{font:400 1.6rem/1 var(--titulo);color:var(--ouro);letter-spacing:.02em}
.criadores{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:24px;justify-content:center}
@media (max-width:620px){.criadores{grid-template-columns:minmax(0,320px)}}

/* ---------- Texto de leitura ---------- */
.prosa{max-width:var(--leitura)}
.prosa--centro{margin-inline:auto}
.prosa h2,.prosa h3{margin:1.6em 0 .5em}
.prosa h2:first-child,.prosa h3:first-child{margin-top:0}
.prosa ul,.prosa ol{margin:0 0 1.1em}
.lista{list-style:none;display:grid;gap:9px;margin:0 0 1.1em}
.lista li{position:relative;padding-left:1.7em;line-height:1.5}
.lista li::before{content:"";position:absolute;left:.15em;top:.5em;width:.6em;height:.6em;background:var(--ouro);transform:rotate(45deg);border-radius:1px}
.lista--sim li::before,.lista--nao li::before{transform:none;background:none;width:auto;height:auto;top:0;left:0;font-weight:800}
.lista--sim li::before{content:"\2713";color:#8fd694}
.lista--nao li::before{content:"\2715";color:var(--rubro)}
.lista--falas li{font-style:italic;color:var(--ouro-claro)}
.canal{display:inline-block;padding:.05em .5em;border-radius:6px;background:rgba(88,101,242,.22);border:1px solid rgba(138,148,255,.45);color:#dfe2ff;font-weight:700;text-decoration:none;white-space:nowrap}
.canal:hover{background:rgba(88,101,242,.4);color:#fff}
.cargo{display:inline-block;padding:.02em .55em;border-radius:6px;background:rgba(242,163,58,.14);border:1px solid var(--linha);color:var(--ouro-claro);font-weight:700;white-space:nowrap}

.migalhas{display:flex;flex-wrap:wrap;gap:.5em;margin:0 0 16px;font-size:.95rem;font-weight:500;color:var(--texto-suave)}
.migalhas a{color:var(--ouro-claro);text-decoration:none}
.migalhas a:hover{text-decoration:underline}
.migalhas span[aria-hidden]{color:var(--linha)}

/* Passos numerados (recrutamento, defesa) */
.passos{list-style:none;counter-reset:passo;display:grid;gap:18px}
.passos--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.passos--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.passos--3,.passos--2{grid-template-columns:1fr}}
.passo{counter-increment:passo;position:relative;padding:26px 24px 24px 24px;background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.passo::before{content:counter(passo);display:grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border-radius:50%;border:1.5px solid var(--ouro);background:radial-gradient(circle at 50% 30%,#3a2414,#150c06);font:400 1.5rem/1 var(--titulo);color:var(--ouro)}
.passo h3{margin-bottom:8px}
.passo p,.passo li{font-size:1.05rem}

/* Níveis de conteúdo */
.nivel{position:relative;padding:clamp(22px,3vw,34px);padding-left:clamp(22px,3vw,34px);background:var(--painel);border:1px solid var(--linha);border-left:4px solid var(--ouro);border-radius:var(--raio);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nivel+.nivel{margin-top:22px}
.nivel__marca{display:inline-block;margin-bottom:8px;font-weight:800;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-claro)}
.nivel h3{margin-bottom:14px}

/* Contrato (Proteção) */
.contrato{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}
@media (max-width:760px){.contrato{grid-template-columns:1fr}}
.contrato__item{padding:22px 20px;text-align:center;background:linear-gradient(rgba(58,36,20,.72),rgba(21,12,6,.82));border:1px solid var(--linha);border-radius:var(--raio)}
.contrato__rotulo{display:block;font-weight:800;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-claro);margin-bottom:6px}
.contrato__valor{display:block;font:400 clamp(1.5rem,2.6vw,2rem)/1.15 var(--titulo);color:var(--ouro)}

/* Trilha entre páginas */
.trilha{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}

/* Índice lateral (guia longo) */
.com-indice{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.indice{position:sticky;top:calc(var(--topo) + 24px);padding:20px;background:var(--painel);border:1px solid var(--linha);border-radius:var(--raio)}
.indice p{margin:0 0 10px;font-weight:800;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-claro)}
.indice ol{list-style:none;display:grid;gap:4px}
.indice a{display:block;padding:7px 10px;border-radius:8px;color:var(--texto);text-decoration:none;font-size:.98rem;line-height:1.3}
.indice a:hover{background:rgba(242,163,58,.12);color:#fff}
@media (max-width:960px){.com-indice{grid-template-columns:1fr}.indice{position:static}}
.planilha{width:100%;height:560px;border:0;background:#fff}
.planilhas{display:grid;gap:26px}

/* ---------- Rodapé ---------- */
.rodape{background:#040506;color:var(--texto-suave);font-size:1rem}
.rodape__dentro{width:min(100%,var(--largura));margin-inline:auto;padding:44px 20px 26px;display:grid;grid-template-columns:auto 1fr auto;gap:28px 48px;align-items:center}
.rodape__marca{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ouro);font:400 1.9rem/1 var(--titulo);letter-spacing:.06em}
.rodape__marca img{width:64px;height:64px}
.rodape__nav{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center}
.rodape__nav a{color:var(--texto);text-decoration:none;font-weight:500}
.rodape__nav a:hover{color:var(--ouro-claro)}
.rodape__redes{display:flex;gap:10px}
.rodape__redes a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--linha);border-radius:50%;color:var(--ouro-claro)}
.rodape__redes a:hover{background:rgba(242,163,58,.14);color:#fff}
.rodape__redes svg{width:20px;height:20px;fill:currentColor}
.rodape__fim{border-top:1px solid var(--linha-fraca);padding:18px 20px 22px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:.92rem}
.bf-credit{display:inline-flex;align-items:center;gap:8px;color:#9a9285;text-decoration:none;font-size:.85rem;transition:color .2s}
.bf-credit img{width:20px;height:20px;border-radius:5px;opacity:.75;transition:opacity .2s}
.bf-credit:hover{color:#e9e2d4}
.bf-credit:hover img{opacity:1}
@media (max-width:860px){.rodape__dentro{grid-template-columns:1fr;justify-items:center;text-align:center}}

/* ---------- Botão flutuante do Discord ---------- */
.discord-fab{position:fixed;right:18px;bottom:18px;z-index:90;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#5865f2;color:#fff;box-shadow:0 10px 26px -6px rgba(0,0,0,.7),0 0 0 3px rgba(255,255,255,.08);transition:transform .2s,box-shadow .2s}
.discord-fab:hover{transform:translateY(-3px) scale(1.05);color:#fff}
.discord-fab:active{transform:scale(.96)}
.discord-fab svg{width:32px;height:32px;fill:currentColor}

/* ---------- Ampliação de imagem ---------- */
.lupa{padding:0;border:0;background:transparent;max-width:min(96vw,1400px);max-height:94vh}
.lupa::backdrop{background:rgba(0,0,0,.88)}
.lupa img{display:block;max-width:100%;max-height:86vh;border-radius:8px;box-shadow:0 30px 80px #000}
.lupa p{margin:10px 0 0;text-align:center;color:#f6e6c8;font-style:italic}
.lupa button{position:absolute;top:8px;right:8px;width:42px;height:42px;border-radius:50%;border:1px solid var(--ouro);background:rgba(7,9,12,.85);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer}

/* ---------- Movimento ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .surgir{transform:translateY(26px);transition:transform .75s cubic-bezier(.2,.7,.2,1)}
  .js .surgir.visto{transform:none}
  .capa__arte{animation:assentar 2.2s cubic-bezier(.2,.7,.2,1) both}
  @keyframes assentar{from{transform:scale(1.07)}to{transform:scale(1)}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---------- Página 404 ---------- */
.perdido{min-height:100vh;display:grid;place-items:center;text-align:center;padding:calc(var(--topo) + 40px) 20px 80px}

/* ---------- Artes de fundo (geradas) ---------- */
[data-fundo="aula"]::before{background-image:url(../img/fundo/aula-960.webp)}
[data-fundo="boas-vindas"]::before{background-image:url(../img/fundo/boas-vindas-960.webp)}
[data-fundo="conves"]::before{background-image:url(../img/fundo/conves-960.webp)}
[data-fundo="desembarque"]::before{background-image:url(../img/fundo/desembarque-960.webp)}
[data-fundo="enseada"]::before{background-image:url(../img/fundo/enseada-960.webp)}
[data-fundo="fogueira"]::before{background-image:url(../img/fundo/fogueira-960.webp)}
[data-fundo="kraken-chamado"]::before{background-image:url(../img/fundo/kraken-chamado-960.webp)}
[data-fundo="obra-academia"]::before{background-image:url(../img/fundo/obra-academia-960.webp)}
[data-fundo="portal-avalon"]::before{background-image:url(../img/fundo/portal-avalon-960.webp)}
[data-fundo="praia-bandeira"]::before{background-image:url(../img/fundo/praia-bandeira-960.webp)}
[data-fundo="praia-barco"]::before{background-image:url(../img/fundo/praia-barco-960.webp)}
@media (min-width:700px){
[data-fundo="aula"]::before{background-image:url(../img/fundo/aula-1920.webp)}
[data-fundo="boas-vindas"]::before{background-image:url(../img/fundo/boas-vindas-1920.webp)}
[data-fundo="conves"]::before{background-image:url(../img/fundo/conves-1920.webp)}
[data-fundo="desembarque"]::before{background-image:url(../img/fundo/desembarque-1920.webp)}
[data-fundo="enseada"]::before{background-image:url(../img/fundo/enseada-1920.webp)}
[data-fundo="fogueira"]::before{background-image:url(../img/fundo/fogueira-1920.webp)}
[data-fundo="kraken-chamado"]::before{background-image:url(../img/fundo/kraken-chamado-1920.webp)}
[data-fundo="obra-academia"]::before{background-image:url(../img/fundo/obra-academia-1920.webp)}
[data-fundo="portal-avalon"]::before{background-image:url(../img/fundo/portal-avalon-1920.webp)}
[data-fundo="praia-bandeira"]::before{background-image:url(../img/fundo/praia-bandeira-1920.webp)}
[data-fundo="praia-barco"]::before{background-image:url(../img/fundo/praia-barco-1920.webp)}
}