/* =========================================================
   AP CARTAZ — tema do blog
   Um cartaz dramático: céu escuro, luz a entrar por um canto,
   nuvens, e tudo o que é interface feito de vidro holográfico.

   Display  → Brutalista        (o título gigante da home e o 404)
   Serifa   → Cormorant Garamond (títulos de posts, rótulos, citações)
   Texto    → Space Grotesk      (corpo dos posts)
   Sistema  → Space Mono         (datas, etiquetas, menu, código)
   Logo     → Relidux

   Para afinar o visual: as cinco variáveis logo abaixo.
   ========================================================= */

@font-face { font-family: 'brutalista'; src: url('../fonts/brutalista.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Relidux'; src: url('../fonts/relidux.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/cormorant-600-italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../fonts/space-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../fonts/space-mono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../fonts/space-grotesk-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
    /* os cinco botões do visual (os mesmos do design) */
    --t: 0.29;      /* escuro do vidro: 0 = totalmente transparente, 0.7 = quase opaco */
    --b: 18px;      /* desfoque do que está atrás do vidro */
    --h: 0.85;      /* intensidade holográfica (0–1) */
    --l: 0.85;      /* luz e reflexos (0–1) */
    --d: 0.7;       /* profundidade: espessura, inclinação, sombras (0–1) */

    /* a direção da luz: vem do canto de cima à esquerda e desce para a direita.
       Tudo o que a luz produz (raio, arco-íris, reflexos no chão, sombras) usa
       este ângulo. O blog.js calcula-o para cada ecrã; estes são os valores de reserva. */
    --ang: 50deg;   /* ângulo da luz, medido a partir da horizontal */
    --inc: 24deg;   /* inclinação dos reflexos no chão que corresponde a esse ângulo */

    --texto: #eef0f6;
    --suave: #d7dbea;
    --azul: #a9e6ff;
    --rosa: #ffd9f2;
    --arco: linear-gradient(100deg, #ffffff, #cdd6ff 16%, #ff9be3 32%, #8fdcff 50%, #a6ffd8 66%, #ffe9a3 82%, #ffffff);

    --font-display: 'brutalista', 'Arial Black', sans-serif;
    --font-serifa: var(--gh-font-heading, 'Cormorant Garamond', 'Times New Roman', serif);
    --font-body: var(--gh-font-body, 'Space Grotesk', 'Segoe UI', system-ui, sans-serif);
    --font-mono: 'Space Mono', 'Courier New', monospace;
    --font-logo: 'Relidux', 'Arial Black', sans-serif;

    --u: min(1vw, 14.4px);                  /* unidade da cena: 1% da largura, até 1440px */
    --a: var(--u);                          /* unidade das asas: igual à da cena, como no design */
    --palco: max(640px, calc(var(--u) * 68));               /* altura do cartaz, como no design */
    --largura-texto: 700px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background: #000;
    color-scheme: dark;
    overflow-x: clip;
}

body {
    position: relative;
    min-height: 100vh;
    color: #fff;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overflow-x: clip;
    background: radial-gradient(70% 720px at 20% 0, #3a4690 0, #171d45 34%, #070812 72%, #000 100%) top / 100% 1500px no-repeat;
}

h1, h2, h3, h4, h5, h6 { font-weight: normal; font-synthesis: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }

::selection { background: #a98bff; color: #000; }

:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 3px;
    border-radius: 6px;
}

.b-dim { color: var(--suave); }

.b-mono {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* texto holográfico */
.b-holo {
    background: var(--arco);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* =========================================================
   O MATERIAL: vidro líquido holográfico
   ========================================================= */
.b-vidro {
    position: relative;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 18px rgba(0, 0, 0, 0.55);
    background:
        radial-gradient(90% 70% at 8% -18%, rgba(255, 255, 255, calc(var(--l) * 0.36)), transparent 60%),
        linear-gradient(118deg, transparent 6%, rgba(255, 255, 255, calc(var(--l) * 0.2)) 10%, rgba(255, 255, 255, calc(var(--l) * 0.03)) 19%, transparent 27%),
        linear-gradient(rgba(8, 8, 18, var(--t)), rgba(8, 8, 18, var(--t))),
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.09));
    -webkit-backdrop-filter: blur(var(--b)) saturate(1.9) brightness(1.08);
    backdrop-filter: blur(var(--b)) saturate(1.9) brightness(1.08);
    box-shadow:
        inset 0 1.5px 0.5px rgba(255, 255, 255, 0.72),
        inset 0 0 0 1px rgba(255, 255, 255, 0.13),
        inset 0 -12px 26px -14px rgba(255, 255, 255, 0.2),
        inset 14px 0 26px -18px rgba(255, 255, 255, 0.14),
        -1px -1px 0 rgba(255, 122, 217, 0.22),
        1px 1px 0 rgba(98, 214, 255, 0.24),
        18px 34px 80px -34px rgba(0, 0, 0, 0.85),
        22px 26px 70px -30px rgba(150, 130, 255, calc(var(--l) * 0.55));
}

/* contorno em arco-íris */
.b-vidro::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    pointer-events: none;
    opacity: var(--h);
    background: conic-gradient(from 210deg, #ff7ad9, #a98bff, #62d6ff, #8dffcf, #ffe58a, #ff9a6a, #ff7ad9);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* película dicroica: faixas largas de cor e um ponto de luz */
.b-vidro::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: var(--h);
    background:
        radial-gradient(30% 34% at 20% 8%, rgba(255, 255, 255, 0.3), transparent 70%),
        linear-gradient(112deg, transparent 0, rgba(120, 110, 255, 0.24) 12%, rgba(255, 95, 190, 0.28) 27%, rgba(255, 170, 80, 0.24) 40%, rgba(255, 240, 150, 0.16) 50%, rgba(90, 230, 255, 0.26) 64%, rgba(110, 120, 255, 0.24) 82%, transparent 100%);
}

.b-vidro > * {
    position: relative;
    z-index: 1;
}

/* placa: vidro grosso (aresta de baixo visível) */
.b-placa {
    box-shadow:
        inset 0 1.5px 0.5px rgba(255, 255, 255, 0.72),
        inset 0 0 0 1px rgba(255, 255, 255, 0.13),
        inset 0 -12px 26px -14px rgba(255, 255, 255, 0.2),
        inset 14px 0 26px -18px rgba(255, 255, 255, 0.14),
        -1px -1px 0 rgba(255, 122, 217, 0.22),
        1px 1px 0 rgba(98, 214, 255, 0.24),
        calc(var(--d) * 5px) calc(var(--d) * 10px) 0 -1px rgba(26, 28, 56, 0.92),
        calc(var(--d) * 5px + 1px) calc(var(--d) * 10px + 1px) 0 -1px rgba(255, 255, 255, 0.42),
        30px 60px 110px -40px rgba(0, 0, 0, 0.95),
        22px 26px 70px -30px rgba(150, 130, 255, calc(var(--l) * 0.55));
}

/* folha de leitura: mais fosca, para o texto se ler bem */
.b-folha {
    background:
        radial-gradient(90% 34% at 8% -8%, rgba(255, 255, 255, calc(var(--l) * 0.2)), transparent 60%),
        linear-gradient(118deg, transparent 4%, rgba(255, 255, 255, calc(var(--l) * 0.1)) 7%, rgba(255, 255, 255, calc(var(--l) * 0.02)) 13%, transparent 18%),
        linear-gradient(rgba(8, 8, 18, calc(var(--t) + 0.3)), rgba(8, 8, 18, calc(var(--t) + 0.3))),
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0.06));
}

.b-folha::after {
    opacity: calc(var(--h) * 0.45);
}

/* reflexo no chão: a luz atravessa a placa e espalha-se em arco-íris por baixo */
.b-vidro > .b-caustica {
    position: absolute;
    z-index: -1;
    left: 6%;
    right: 6%;
    top: calc(100% - 22px);
    height: 300px;
    pointer-events: none;
    transform-origin: 50% 0;
    /* o reflexo cai para o lado oposto ao da luz: desce e foge para a direita */
    transform: perspective(700px) rotateX(58deg) skewX(var(--inc));
    opacity: calc(var(--l) * 0.9);
    filter: blur(12px) saturate(1.35);
    background: linear-gradient(90deg, transparent 0, rgba(120, 110, 255, 0.85) 6%, rgba(80, 215, 255, 0.9) 13%, transparent 20%, rgba(255, 235, 110, 0.85) 27%, rgba(255, 150, 70, 0.9) 34%, rgba(255, 90, 170, 0.95) 42%, transparent 50%, rgba(170, 110, 255, 0.85) 57%, rgba(90, 205, 255, 0.9) 65%, rgba(120, 255, 200, 0.7) 71%, transparent 78%, rgba(255, 225, 120, 0.85) 85%, rgba(255, 110, 190, 0.9) 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.6) 45%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.6) 45%, transparent 100%);
}

.b-etiqueta {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    color: var(--azul);
    white-space: nowrap;
}

a.b-etiqueta:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.b-seta {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    transition: transform 0.4s var(--ease), background-color 0.3s, color 0.3s;
}

.b-seta svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* botões */
.b-botao {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: transform 0.3s var(--ease), box-shadow 0.3s;
}

.b-botao:hover {
    transform: translateY(-2px);
}

.b-botao-cheio {
    color: #05060a;
    text-shadow: none;
    background: linear-gradient(180deg, #ffffff 0%, #dfe4ee 45%, #9da5b8 52%, #e9edf5 100%);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, 0.25), 0 14px 40px -12px rgba(150, 140, 255, 0.7);
}

/* =========================================================
   A CENA: luz no canto, raios, nuvens, película por cima
   ========================================================= */
.b-cena {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: max(700px, calc(var(--palco) + 160px));
    pointer-events: none;
    z-index: 0;
    /* a cena desvanece para o preto em baixo, sem corte */
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

.b-cena i {
    position: absolute;
    inset: 0;
}

.b-sol {
    opacity: var(--l);
    background: radial-gradient(34% 46% at 17% -4%, rgba(255, 244, 224, 0.85), rgba(255, 220, 200, 0.25) 40%, transparent 72%);
}

.b-raios {
    opacity: calc(var(--l) * 0.9);
    filter: blur(3px);
    background: repeating-conic-gradient(from 96deg at 17% -6%, rgba(255, 240, 222, 0) 0deg, rgba(255, 240, 222, 0.2) 2.4deg, rgba(255, 240, 222, 0) 5.5deg, rgba(255, 240, 222, 0.09) 7deg, rgba(255, 240, 222, 0) 9deg);
    -webkit-mask-image: radial-gradient(95% 110% at 17% -6%, #000 10%, rgba(0, 0, 0, 0.5) 45%, transparent 82%);
    mask-image: radial-gradient(95% 110% at 17% -6%, #000 10%, rgba(0, 0, 0, 0.5) 45%, transparent 82%);
}

.b-nuvens-longe {
    background: url('../img/nuvens-longe.webp') center / cover no-repeat;
    opacity: 1;
    -webkit-mask-image: radial-gradient(60% 55% at 46% 30%, transparent 30%, #000 100%);
    mask-image: radial-gradient(60% 55% at 46% 30%, transparent 30%, #000 100%);
}

.b-nuvens-perto {
    position: absolute;
    left: 0;
    right: 0;
    height: calc(var(--u) * 42);
    min-height: 300px;
    pointer-events: none;
    background: url('../img/nuvens-perto.webp') center / cover no-repeat;
    opacity: 1;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 42%, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 42%, #000 62%, transparent 100%);
}

/* película: escurece as margens e dá grão de pintura a tudo */
.b-pelicula {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
}

.b-pelicula::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../img/grao.png') 0 0 / 180px 180px;
    mix-blend-mode: overlay;
    opacity: 0.16;
}

/* luz: raio que entra, arco-íris que sai, estrela de reflexo */
.b-raio,
.b-prisma {
    position: absolute;
    transform-origin: 0 50%;
    pointer-events: none;
}

.b-raio {
    height: 2px;
    margin-top: -1px;
    opacity: var(--l);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.3) 35%, transparent 80%);
    box-shadow: 0 0 14px rgba(190, 200, 255, 0.6);
}

.b-prisma {
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    opacity: calc(var(--l) * 0.7);
    filter: blur(16px) saturate(1.3);
    background: linear-gradient(180deg, transparent 6%, #ff4d6d 22%, #ff9e4a 33%, #ffe45c 43%, #6dffa8 52%, #4fd8ff 62%, #7b6cff 73%, #d05cff 83%, transparent 96%);
    -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.85) 30%, transparent 80%);
    mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.85) 30%, transparent 80%);
}

.b-brilho {
    position: absolute;
    pointer-events: none;
    opacity: var(--l);
    background: radial-gradient(closest-side, #fff 0, rgba(225, 228, 255, 0.75) 7%, rgba(170, 160, 255, 0.22) 26%, transparent 60%);
}

.b-brilho::before,
.b-brilho::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, #fff 0, rgba(255, 255, 255, 0.55) 28%, transparent 100%);
}

.b-brilho::before { width: 175%; height: 3px; }
.b-brilho::after  { width: 3px; height: 105%; }

/* =========================================================
   TOPO
   ========================================================= */
.b-progresso {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 90;
    background: linear-gradient(90deg, #ff7ad9, #a98bff, #62d6ff, #8dffcf, #ffe58a);
    box-shadow: 0 0 12px rgba(150, 140, 255, 0.8);
    transform: scaleX(0);
    transform-origin: left center;
}

.b-topo {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 3.5% 0;
}

.b-logo {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    min-height: 44px;
    padding-top: 10px;
    font-family: var(--font-logo);
    font-size: 23px;
    line-height: 1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.b-logo svg {
    width: 11px;
    height: 11px;
    fill: #8fdcff;
    transition: transform 0.6s var(--ease);
}

.b-logo:hover svg {
    transform: rotate(180deg) scale(1.4);
}

.b-menu {
    display: flex;
    align-items: center;
    gap: 6px;
}

.b-menu ul {
    display: flex;
    gap: 2px;
    list-style: none;
}

.b-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #e3e6f0;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
    transition: color 0.2s;
}

.b-menu a:hover,
.b-menu .nav-current a {
    color: #fff;
}

.b-menu .nav-current a {
    text-decoration: underline;
    text-decoration-color: var(--azul);
    text-underline-offset: 6px;
}

.b-relogio {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #e3e6f0;
    white-space: nowrap;
    padding: 0 8px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
    font-variant-numeric: tabular-nums;
}

.b-relogio b {
    color: #fff;
    margin-right: 6px;
}

/* botão EN / PT (criado pelo blog.js) */
.b-lang {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: #c9cee0;
    cursor: pointer;
}

.b-lang span,
.b-lang i {
    position: relative;
    z-index: 1;
    opacity: 0.6;
    font-style: normal;
}

.b-lang span.ativo {
    opacity: 1;
    color: #8fdcff;
}

/* =========================================================
   ESTRUTURA
   ========================================================= */
.b-main {
    position: relative;
    z-index: 1;
}

.b-coluna {
    position: relative;
    max-width: 1148px;
    margin: 0 auto;
    padding: 0 24px;
}

/* =========================================================
   HOME — o cartaz
   ========================================================= */
.b-hero {
    position: relative;
    z-index: 0;
    height: var(--palco);
    margin-top: -62px;          /* a cena começa atrás da barra do topo */
    --px: 0.5;                  /* posição do rato (0–1), posta pelo blog.js */
}

.b-hero-titulo {
    position: absolute;
    left: 0;
    right: 0;
    top: 8%;
    padding: 0 2%;
    text-align: center;
    font-family: var(--font-display);
    font-size: calc(var(--u) * 14.6);       /* o blog.js ajusta à largura exata */
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    font-kerning: none;
    cursor: default;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.96), rgba(196, 206, 255, 0.5) 16%, rgba(255, 150, 225, 0.72) 32%, rgba(130, 214, 255, 0.78) 50%, rgba(160, 255, 214, 0.66) 66%, rgba(255, 232, 160, 0.78) 82%, rgba(255, 255, 255, 0.96));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.8);
    /* o volume das letras cai para baixo e para a direita, o lado oposto ao da luz */
    filter: drop-shadow(1px 2px 0 rgba(255, 255, 255, 0.55)) drop-shadow(2px 4px 0 rgba(190, 180, 255, 0.4)) drop-shadow(4px 7px 0 rgba(130, 120, 240, 0.3)) drop-shadow(6px 11px 0 rgba(80, 70, 190, 0.22)) drop-shadow(22px 34px 44px rgba(120, 110, 255, 0.5));
}

/* o centro da figura */
.b-figura {
    position: absolute;
    left: 50%;
    top: 56%;
    width: 0;
    height: 0;
}

.b-figura .b-prisma {
    left: 0;
    top: 0;
    width: calc(var(--u) * 75);
    height: calc(var(--a) * 22);
    margin-top: calc(var(--a) * -11);
    /* sai na mesma direção em que a luz entrou (com um ligeiro desvio, como num prisma) */
    transform: rotate(calc(var(--ang) - 4deg + (var(--px) - 0.5) * 4deg));
}

.b-figura .b-raio {
    left: 0;
    top: 0;
    width: calc(var(--u) * 62);
    transform: rotate(calc(var(--ang) + 180deg));     /* aponta para o sol */
}

/* as asas: penas de vidro holográfico, abertas em leque */
.b-asa {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    transform: perspective(1400px) rotateY(calc(var(--d) * -20deg + (var(--px) - 0.5) * 10deg));
}

.b-asa-e {
    transform: scaleX(-1) perspective(1400px) rotateY(calc(var(--d) * -20deg - (var(--px) - 0.5) * 10deg));
}

.b-pena {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--a) * var(--c));
    height: calc(var(--a) * var(--c) * 0.2);
    margin-top: calc(var(--a) * var(--c) * -0.1);
    transform-origin: 0 50%;
    transform: rotate(var(--r)) translateX(calc(var(--a) * 2.5));
    border-radius: 50%;
    /* o material das penas é exatamente o do design: vidro iridescente em leque */
    opacity: calc(0.4 + var(--h) * 0.55);
    background: conic-gradient(from 60deg at 62% 50%, rgba(10, 10, 30, 0.18), rgba(107, 124, 255, 0.55) 12%, rgba(211, 220, 255, 0.78) 20%, rgba(255, 143, 224, 0.6) 29%, rgba(255, 217, 160, 0.55) 36%, rgba(141, 255, 207, 0.5) 45%, rgba(95, 208, 255, 0.6) 56%, rgba(22, 22, 58, 0.22) 68%, rgba(185, 166, 255, 0.55) 80%, rgba(242, 245, 255, 0.82) 90%, rgba(10, 10, 30, 0.18));
    -webkit-backdrop-filter: blur(calc(var(--b) * 0.45)) saturate(1.7);
    backdrop-filter: blur(calc(var(--b) * 0.45)) saturate(1.7);
    box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.3), inset 0 -14px 30px -12px rgba(255, 255, 255, 0.35), 0 0 50px rgba(130, 120, 255, calc(var(--l) * 0.45));
}

.b-pena:nth-child(1) { --c: 30; --r: -74deg; }
.b-pena:nth-child(2) { --c: 36; --r: -59deg; }
.b-pena:nth-child(3) { --c: 40; --r: -45deg; }
.b-pena:nth-child(4) { --c: 42; --r: -31deg; }
.b-pena:nth-child(5) { --c: 40; --r: -18deg; }
.b-pena:nth-child(6) { --c: 35; --r: -5deg; }
.b-pena:nth-child(7) { --c: 29; --r: 9deg; }
.b-pena:nth-child(8) { --c: 21; --r: 24deg; }

.b-nucleo {
    position: absolute;
    left: calc(var(--a) * -1.5);
    top: calc(var(--a) * -7);
    width: calc(var(--a) * 3);
    height: calc(var(--a) * 17);
    border-radius: 50%;
    background: radial-gradient(closest-side, #fff 0, rgba(235, 238, 255, 0.9) 30%, rgba(170, 160, 255, 0.35) 70%, transparent 100%);
    filter: blur(4px);
    opacity: var(--l);
    pointer-events: none;
}

.b-figura .b-brilho {
    left: calc(var(--a) * -12);
    top: calc(var(--palco) * -0.04 - var(--a) * 12);
    width: calc(var(--a) * 24);
    height: calc(var(--a) * 24);
}

.b-hero .b-nuvens-perto {
    top: 60%;
}

/* rótulos de cartaz */
.b-rotulo {
    position: absolute;
    font-family: var(--font-serifa);
    font-weight: 600;
    font-size: clamp(30px, calc(var(--u) * 4.6), 68px);
    line-height: 0.84;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: var(--arco);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 22px rgba(160, 150, 255, 0.6));
    transition: background-position 0.9s var(--ease), filter 0.3s;
}

.b-rotulo:hover {
    background-position: 100% 0;
    filter: drop-shadow(0 0 30px rgba(190, 180, 255, 0.95));
}

.b-rotulo-d { right: 3.5%; top: 43%; text-align: right; }
.b-rotulo-e { left: 3.5%; top: 80%; }

.b-citacao {
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 3.5%;
    text-align: center;
    font-family: var(--font-serifa);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(18px, calc(var(--u) * 1.8), 27px);
    line-height: 1.25;
    color: var(--rosa);
    text-shadow: 0 0 18px rgba(255, 120, 210, 0.55), 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* a entrada: as asas abrem-se uma vez, ao carregar a página */
.js .b-pena { animation: b-abrir 1.5s var(--ease) both; }
.js .b-pena:nth-child(1) { animation-delay: 0.50s; }
.js .b-pena:nth-child(2) { animation-delay: 0.44s; }
.js .b-pena:nth-child(3) { animation-delay: 0.38s; }
.js .b-pena:nth-child(4) { animation-delay: 0.32s; }
.js .b-pena:nth-child(5) { animation-delay: 0.26s; }
.js .b-pena:nth-child(6) { animation-delay: 0.20s; }
.js .b-pena:nth-child(7) { animation-delay: 0.14s; }
.js .b-pena:nth-child(8) { animation-delay: 0.08s; }
.js .b-figura .b-brilho { animation: b-estrela 1.2s var(--ease) 0.1s both; }
.js .b-figura .b-prisma { animation: b-prisma 1.4s var(--ease) 0.5s both; }
.js .b-hero-titulo { animation: b-surge 1.2s var(--ease) both; }

@keyframes b-abrir {
    from { opacity: 0; transform: rotate(40deg) translateX(calc(var(--a) * 2.5)) scale(0.55, 0.4); }
}

@keyframes b-estrela {
    0%  { opacity: 0; transform: scale(0.2) rotate(-25deg); }
    50% { transform: scale(1.3) rotate(0deg); }
}

@keyframes b-prisma {
    from { opacity: 0; clip-path: polygon(0 50%, 0 50%, 0 50%); }
}

@keyframes b-surge {
    from { opacity: 0; }
}

/* =========================================================
   ARQUIVO — a lista de posts numa placa de vidro
   ========================================================= */
.b-arquivo {
    max-width: 1052px;
    margin: -24px auto 0;
    padding: 34px 40px 18px;
    border-radius: 44px;
    counter-reset: post;
}

.b-arquivo-solto {
    margin-top: 0;
}

.b-arquivo-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 24px;
    padding: 0 6px 22px;
}

.b-arquivo-titulo {
    font-family: var(--font-serifa);
    font-style: italic;
    font-weight: 600;
    font-size: 46px;
    line-height: 1;
}

.b-contagem {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--suave);
}

.b-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    padding: 20px 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    counter-increment: post;
}

.b-linha-num {
    min-width: 28px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--azul);
}

.b-linha-num::before {
    content: counter(post, decimal-leading-zero);
}

.b-linha-titulo {
    flex: 1 1 380px;
    font-family: var(--font-serifa);
    font-weight: 600;
    font-size: 33px;
    line-height: 1.08;
    background: var(--arco);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: #fff;
    transition: -webkit-text-fill-color 0.3s, background-position 1.1s var(--ease);
}

.b-linha-data {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--suave);
    white-space: nowrap;
}

.b-linha:hover .b-linha-titulo,
.b-linha:focus-visible .b-linha-titulo {
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    background-position: 100% 0;
}

.b-linha:hover .b-seta {
    transform: rotate(-45deg);
    background: #fff;
    color: #000;
}

.b-vazio {
    padding: 34px 6px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.b-vazio p:first-child {
    font-family: var(--font-serifa);
    font-weight: 600;
    font-size: 33px;
    line-height: 1.1;
}

/* paginação */
.b-paginacao {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    max-width: 1052px;
    margin: 150px auto 0;
    padding: 0 6px;
}

.b-paginacao > :first-child { justify-self: start; }
.b-paginacao > :last-child { justify-self: end; }

.b-paginacao-num {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--suave);
}

/* cabeçalho pequeno (etiquetas e autor) */
.b-cabeca {
    max-width: 1052px;
    margin: 0 auto;
    padding: 70px 6px 54px;
}

.b-cabeca-titulo {
    font-family: var(--font-serifa);
    font-weight: 600;
    font-size: clamp(48px, 8vw, 110px);
    line-height: 0.98;
    padding-bottom: 8px;
    filter: drop-shadow(0 0 26px rgba(160, 150, 255, 0.55));
}

.b-cabeca-desc {
    margin-top: 14px;
    max-width: 640px;
    font-family: var(--font-serifa);
    font-style: italic;
    font-weight: 500;
    font-size: 27px;
    line-height: 1.3;
    color: var(--rosa);
    text-shadow: 0 0 18px rgba(255, 120, 210, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* =========================================================
   POST
   ========================================================= */
.b-post {
    position: relative;
}

.b-post-luz {
    position: absolute;
    left: 30%;          /* o blog.js põe este ponto em cima do raio de luz */
    top: 30px;
    width: 0;
    height: 0;
    pointer-events: none;
}

.b-post-luz .b-prisma {
    left: 0;
    top: 0;
    width: 100vw;
    height: 280px;
    margin-top: -140px;
    opacity: calc(var(--l) * 0.5);      /* mais suave: passa por trás do título */
    transform: rotate(calc(var(--ang) - 4deg));
}

.b-post-luz .b-raio {
    left: 0;
    top: 0;
    width: 40vw;
    transform: rotate(calc(var(--ang) + 180deg));
}

.b-post-luz .b-brilho {
    left: -110px;
    top: -110px;
    width: 220px;
    height: 220px;
}

.b-post .b-nuvens-perto {
    top: 358px;
    height: 460px;
}

.b-post-topo {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    padding: 64px 0 56px;
}

.b-voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #e3e6f0;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
    transition: color 0.2s;
}

.b-voltar:hover { color: #fff; }

.b-voltar svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.b-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #e3e6f0;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

.b-meta .b-etiqueta {
    text-shadow: none;
}

.b-post-titulo {
    margin-top: 18px;
    font-family: var(--font-serifa);
    font-weight: 600;
    font-size: clamp(44px, 7vw, 96px);
    line-height: 0.98;
    letter-spacing: -0.01em;
    padding-bottom: 8px;
    filter: drop-shadow(0 0 26px rgba(160, 150, 255, 0.55));
}

.b-post-lead {
    margin-top: 18px;
    font-family: var(--font-serifa);
    font-style: italic;
    font-weight: 500;
    font-size: 27px;
    line-height: 1.3;
    color: var(--rosa);
    text-shadow: 0 0 18px rgba(255, 120, 210, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* capa: a imagem dentro de uma moldura de vidro, ligeiramente inclinada */
.b-post-img {
    max-width: 1000px;
    margin: 0 auto 48px;
    padding: 12px;
    border-radius: 44px;
    transform: perspective(1800px) rotateX(calc(var(--d) * 4deg));
    transform-origin: 50% 100%;
}

.b-post-img img {
    width: 100%;
    max-height: 640px;
    object-fit: cover;
    border-radius: 32px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.b-post-img figcaption,
.b-conteudo figcaption {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--suave);
    text-align: center;
    padding: 12px 12px 4px;
}

.b-post-folha {
    max-width: 820px;
    margin: 0 auto;
    padding: 52px 60px 56px;
    border-radius: 44px;
}

/* ---------- Conteúdo dos posts (o que escreves no Ghost) ---------- */
.b-conteudo {
    font-size: 19px;
    line-height: 1.75;
    color: var(--texto);
}

.b-conteudo > * + * {
    margin-top: 1.25em;
}

.b-conteudo h2,
.b-conteudo h3,
.b-conteudo h4 {
    font-family: var(--font-serifa);
    font-weight: 600;
    line-height: 1.08;
    margin-top: 1.5em;
    color: #fff;
}

.b-conteudo h2 { font-size: 42px; }
.b-conteudo h3 { font-size: 31px; }
.b-conteudo h4 { font-size: 25px; }

.b-conteudo h2 + *,
.b-conteudo h3 + *,
.b-conteudo h4 + * {
    margin-top: 0.6em;
}

.b-conteudo a {
    color: #fff;
    background: linear-gradient(100deg, #ff7ad9, #a98bff, #62d6ff, #8dffcf, #ffe58a) 0 100% / 100% 2px no-repeat;
    padding-bottom: 2px;
    transition: color 0.2s, text-shadow 0.2s;
}

.b-conteudo a:hover {
    color: var(--azul);
    text-shadow: 0 0 18px rgba(98, 214, 255, 0.6);
}

.b-conteudo strong {
    font-weight: 700;
    color: #fff;
}

.b-conteudo ul,
.b-conteudo ol {
    padding-left: 1.4em;
}

.b-conteudo li + li {
    margin-top: 0.4em;
}

.b-conteudo ul li::marker {
    content: "✦  ";
    color: #b9a6ff;
    font-size: 0.7em;
}

.b-conteudo ol li::marker {
    font-family: var(--font-mono);
    font-size: 0.8em;
    color: var(--suave);
}

/* citações: um pedaço de vidro dentro da folha */
.b-conteudo blockquote {
    position: relative;
    padding: 26px 30px;
    border-radius: 26px;
    font-family: var(--font-serifa);
    font-style: italic;
    font-weight: 500;
    font-size: 29px;
    line-height: 1.3;
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 45%, rgba(255, 255, 255, 0.1));
    box-shadow: inset 0 1.5px 0.5px rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.14), -1px -1px 0 rgba(255, 122, 217, 0.22), 1px 1px 0 rgba(98, 214, 255, 0.24);
}

.b-conteudo .kg-blockquote-alt {
    text-align: center;
    font-size: 34px;
    background: none;
    box-shadow: none;
    color: var(--rosa);
    text-shadow: 0 0 18px rgba(255, 120, 210, 0.5);
}

/* separador: uma estrela entre dois fios de luz */
.b-conteudo hr {
    border: none;
    height: 1px;
    margin: 2.6em 0;
    overflow: visible;
    text-align: center;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4) 44%, transparent 46%, transparent 54%, rgba(255, 255, 255, 0.4) 56%, transparent);
}

.b-conteudo hr::after {
    content: "✦";
    position: relative;
    top: -0.85em;
    font-size: 18px;
    color: #fff;
    text-shadow: 0 0 10px #a98bff, 0 0 22px #62d6ff;
}

.b-conteudo code {
    font-family: var(--font-mono);
    font-size: 0.84em;
    color: #c9f0ff;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.12em 0.4em;
}

.b-conteudo pre {
    position: relative;
    background: rgba(255, 255, 255, 0.07);
    color: #e9ecf5;
    border-radius: 24px;
    box-shadow: inset 0 1.5px 0.5px rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    padding: 48px 24px 22px;
    overflow-x: auto;
    font-size: 15px;
    line-height: 1.6;
}

.b-conteudo pre::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 24px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 17px 0 0 rgba(255, 255, 255, 0.5), 34px 0 0 rgba(255, 255, 255, 0.25);
}

.b-conteudo pre code {
    background: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

.b-conteudo table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 16px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.b-conteudo th,
.b-conteudo td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 14px;
    text-align: left;
}

.b-conteudo tr:last-child td { border-bottom: none; }

.b-conteudo th {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--suave);
    background: rgba(255, 255, 255, 0.07);
}

/* ---------- Cartões do editor do Ghost ---------- */
.b-conteudo .kg-card {
    margin-top: 2em;
    margin-bottom: 2em;
}

.b-conteudo .kg-image-card img {
    border-radius: 22px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 calc(var(--d) * 26px) 46px -16px rgba(0, 0, 0, 0.85);
    margin: 0 auto;
}

/* obrigatórios para as imagens "wide" e "full" do editor */
.kg-width-wide {
    position: relative;
    width: min(1000px, calc(100vw - 40px));
    max-width: none;
    left: 50%;
    transform: translateX(-50%);
}

.kg-width-full {
    position: relative;
    width: 100vw;
    max-width: none;
    left: 50%;
    transform: translateX(-50%);
}

.kg-width-full img {
    border-radius: 0 !important;
}

.b-conteudo .kg-gallery-image img {
    border-radius: 14px;
}

.b-conteudo .kg-bookmark-card a.kg-bookmark-container {
    border: none;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1.5px 0.5px rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    color: var(--texto);
    overflow: hidden;
    padding-bottom: 0;
    transition: transform 0.25s var(--ease), background-color 0.25s;
}

.b-conteudo .kg-bookmark-card a.kg-bookmark-container:hover {
    color: var(--texto);
    text-shadow: none;
    transform: translateY(-3px);
    background-color: rgba(255, 255, 255, 0.14);
}

.b-conteudo .kg-bookmark-title {
    font-family: var(--font-serifa);
    font-weight: 600;
    font-size: 22px;
    color: #fff;
}

.b-conteudo .kg-bookmark-description,
.b-conteudo .kg-bookmark-metadata {
    color: var(--suave);
}

.b-conteudo .kg-callout-card {
    border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.b-conteudo .kg-callout-card-grey,
.b-conteudo .kg-callout-card-white {
    background: rgba(255, 255, 255, 0.08);
    color: var(--texto);
}

.b-conteudo .kg-button-card a.kg-btn {
    height: 48px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #05060a;
    background: linear-gradient(180deg, #ffffff 0%, #dfe4ee 45%, #9da5b8 52%, #e9edf5 100%);
    padding: 0 26px;
    text-shadow: none;
}

.b-conteudo .kg-embed-card iframe {
    width: 100%;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.b-conteudo .kg-toggle-card,
.b-conteudo .kg-file-card a.kg-file-card-container,
.b-conteudo .kg-audio-card,
.b-conteudo .kg-product-card-container {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    color: var(--texto);
}

.b-conteudo .kg-toggle-heading-text,
.b-conteudo .kg-file-card-title,
.b-conteudo .kg-audio-title,
.b-conteudo .kg-product-card-title {
    color: #fff;
}

.b-conteudo .kg-toggle-card-icon svg {
    color: var(--suave);
}

.b-conteudo .kg-header-card,
.b-conteudo .kg-signup-card {
    border-radius: 24px;
    overflow: hidden;
}

/* ---------- Anterior / seguinte ---------- */
.b-post-nav {
    max-width: 820px;
    margin: 28px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    perspective: 1400px;
}

.b-post-nav-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 22px 26px;
    border-radius: 30px;
    transform: rotateY(calc(var(--d) * 9deg));
    transform-origin: 0 50%;
    transition: transform 0.5s var(--ease);
}

.b-post-nav-item strong {
    font-family: var(--font-serifa);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.1;
}

.b-post-nav-next {
    grid-column: 2;
    text-align: right;
    transform: rotateY(calc(var(--d) * -9deg));
    transform-origin: 100% 50%;
}

.b-post-nav-item:hover {
    transform: none;
}

.b-post-nav-item .b-contagem {
    text-shadow: none;
}

/* =========================================================
   404
   ========================================================= */
.b-erro {
    position: relative;
    min-height: 74vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 24px 60px;
    text-align: center;
    --px: 0.5;
}

.b-erro .b-hero-titulo {
    position: relative;
    top: auto;
    width: 100%;
    font-size: calc(var(--u) * 20);
}

.b-janela {
    width: min(560px, 100%);
    margin: 40px 0 30px;
    padding: 50px 28px 28px;
    text-align: left;
    border-radius: 28px;
}

.b-janela-titulo {
    font-family: var(--font-serifa);
    font-weight: 600;
    font-size: 34px;
    line-height: 1.1;
    margin-bottom: 8px;
}

.b-erro-botoes {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.b-footer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 170px 38px 40px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #c3c8d8;
}

.b-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.b-footer a {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    text-underline-offset: 3px;
}

.b-footer a:hover {
    color: #fff;
}

.post-template .b-footer,
.page-template .b-footer {
    padding-top: 90px;
}

/* =========================================================
   ECRÃS MÉDIOS E TELEMÓVEL
   ========================================================= */
@media (max-width: 1040px) {
    .b-post-img,
    .b-post-nav-item,
    .b-post-nav-next {
        transform: none;
    }
}

@media (max-width: 820px) {
    :root {
        --a: 1.12vw;            /* a figura cabe inteira no ecrã, com as proporções do design */
        --palco: 600px;
    }

    body {
        font-size: 17px;
    }

    .b-relogio,
    .b-menu ul li:first-child {     /* o logótipo já leva ao início */
        display: none;
    }

    .b-topo {
        padding: 10px 12px 0;
    }

    .b-menu {
        gap: 0;
    }

    .b-menu a {
        padding: 0 8px;
        font-size: 11px;
        letter-spacing: 0.06em;
    }

    .b-lang {
        margin-left: 4px;
        padding: 0 11px;
        font-size: 10px;
    }

    .b-hero {
        margin-top: -54px;
    }

    .b-hero-titulo {
        top: 13%;
        -webkit-text-stroke-width: 1px;
        filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55)) drop-shadow(0 2px 0 rgba(190, 180, 255, 0.4)) drop-shadow(0 4px 0 rgba(130, 120, 240, 0.3)) drop-shadow(0 16px 24px rgba(120, 110, 255, 0.5));
    }

    .b-figura {
        top: 42%;               /* as asas sobem por trás do título, como no cartaz */
    }

    .b-figura .b-prisma {
        width: 150vw;
    }

    .b-pena {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .b-rotulo-d { right: 14px; top: 47%; }
    .b-rotulo-e { left: 14px; top: 70%; }

    .b-citacao {
        left: 7%;
        right: 7%;
        bottom: 5%;
    }

    .b-coluna {
        padding: 0 12px;
    }

    .b-arquivo {
        padding: 26px 18px 10px;
        border-radius: 32px;
    }

    .b-arquivo-titulo {
        font-size: 38px;
    }

    .b-linha {
        gap: 8px 14px;
        padding: 18px 4px;
    }

    .b-linha-titulo {
        flex-basis: calc(100% - 44px);
        font-size: 27px;
    }

    .b-linha-data {
        margin-right: auto;
    }

    .b-linha .b-etiqueta {
        margin-left: 42px;
    }

    .b-cabeca {
        padding: 44px 6px 40px;
    }

    .b-post-topo {
        padding: 36px 4px 40px;
    }

    .b-post-lead,
    .b-cabeca-desc {
        font-size: 23px;
    }

    .b-post-luz {
        top: 24px;
    }

    .b-post-luz .b-brilho {
        display: none;
    }

    .b-post-luz .b-prisma {
        height: 200px;
        margin-top: -100px;
        opacity: calc(var(--l) * 0.4);
    }

    .b-post-img {
        padding: 9px;
        border-radius: 30px;
        margin-bottom: 32px;
    }

    .b-post-img img {
        border-radius: 22px;
    }

    .b-post-folha {
        padding: 32px 22px 36px;
        border-radius: 32px;
    }

    .b-conteudo {
        font-size: 18px;
    }

    .b-conteudo h2 { font-size: 34px; }
    .b-conteudo h3 { font-size: 27px; }

    .b-conteudo blockquote {
        font-size: 25px;
        padding: 20px 22px;
    }

    .kg-width-wide {
        width: calc(100vw - 24px);
    }

    .b-post-nav {
        grid-template-columns: 1fr;
    }

    .b-post-nav-next {
        grid-column: 1;
    }

    .b-vidro > .b-caustica {
        height: 220px;
        filter: blur(9px) saturate(1.35);
    }

    .b-footer {
        padding: 130px 22px 34px;
    }

    .b-erro .b-hero-titulo {
        font-size: 26vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}