/* Página Sobre — história de origem (texto do Plano_Site §4) */

/* barra de progresso da leitura */
.barra-leitura { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 60; background: linear-gradient(90deg, var(--ciano), #0090E0); box-shadow: 0 0 10px rgba(0,207,240,.6); }

/* abertura */
.abertura-sobre { position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; padding: 140px 0 70px; }
.abertura-sobre .fundo { position: absolute; inset: 0; background: url(../assets/img/trilha-amanhecer-1920.webp) center 45% / cover; }
@media (max-width: 960px) { .abertura-sobre .fundo { background-image: url(../assets/img/trilha-amanhecer-960.webp); background-position: 38% 45%; } }
.abertura-sobre::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--azul-profundo) 0%, rgba(7,17,31,.75) 35%, rgba(7,17,31,.15) 70%, rgba(7,17,31,.35) 100%); }
.abertura-sobre .recipiente { position: relative; z-index: 1; }
.abertura-sobre h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 860px; }
.abertura-sobre .linha-fina { font: 400 clamp(1.05rem, 1.8vw, 1.3rem)/1.55 var(--fonte-titulo); color: var(--prata); max-width: 680px; margin: 0; }

/* texto corrido */
.artigo { max-width: 720px; margin: 0 auto; padding: 40px 24px 40px; }
.artigo section { padding: 34px 0; }
.artigo h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); display: flex; gap: 16px; align-items: baseline; margin-bottom: .8em; }
.artigo h2 .n { font: 400 .72rem/1 var(--fonte-marca); color: var(--ciano); letter-spacing: .2em; flex: none; transform: translateY(-3px); }
.artigo p { font-size: 1.1rem; line-height: 1.8; color: var(--texto); }

.destaque {
  margin: 30px 0 6px; padding: 26px 0 26px 28px; border-left: 2px solid var(--ciano);
  font: 400 clamp(1.2rem, 2.2vw, 1.5rem)/1.55 var(--fonte-titulo); color: var(--branco);
  background: linear-gradient(90deg, rgba(0,207,240,.07), transparent 70%);
}

.figura { max-width: 1000px; margin: 20px auto; padding: 0 24px; }
.figura .moldura-img img { aspect-ratio: 21 / 9; }
.figura figcaption { text-align: center; font-size: .85rem; color: var(--texto-suave); margin-top: 14px; }

/* fecho + assinatura */
.fecho { text-align: center; padding: 90px 24px 110px; background: radial-gradient(ellipse 50% 60% at 50% 30%, rgba(0,191,234,.12), transparent 70%), var(--azul-2); }
.fecho .artigo { padding-top: 0; padding-bottom: 0; text-align: left; }
.fecho h2 { justify-content: flex-start; }
.assinatura { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 46px; }
.assinatura img { width: 74px; margin-bottom: 12px; filter: drop-shadow(0 0 18px rgba(0,207,240,.35)); }
.assinatura .nome-autor { font: 600 1.3rem/1.2 var(--fonte-titulo); color: var(--branco); }
.assinatura .papel { font-size: .9rem; color: var(--texto-suave); }
.assinatura .lema { font: 400 .72rem/1 var(--fonte-marca); letter-spacing: .25em; text-transform: uppercase; color: var(--ciano); margin-top: 22px; }
.fecho .botoes { justify-content: center; margin-top: 44px; }

@media (max-width: 520px) {
  .artigo { padding-left: 16px; padding-right: 16px; }
  .artigo p { font-size: 1.04rem; }
  .figura { padding: 0 16px; }
  .figura .moldura-img img { aspect-ratio: 4 / 3; }
}

/* computador: texto da abertura à direita, deixando a pessoa da foto (à esquerda) visível */
@media (min-width: 901px) {
  .abertura-sobre { align-items: center; }
  .abertura-sobre::after { background:
      linear-gradient(270deg, rgba(7,17,31,.88) 0%, rgba(7,17,31,.55) 45%, rgba(7,17,31,0) 70%),
      linear-gradient(0deg, var(--azul-profundo) 0%, transparent 28%); }
  .abertura-sobre .recipiente > * { margin-left: auto; max-width: 600px; }
  .abertura-sobre .recipiente { display: flex; flex-direction: column; align-items: flex-end; }
  .abertura-sobre .recipiente > * { align-self: flex-end; width: 600px; }
  .abertura-sobre .fundo { background-position: center 60%; }
}