/* dobra · Mineração e terras raras (artigos.html): o céu da capa, como o forro pintado das igrejas de Ouro Preto,
   com nuvens que passam devagar e um resplendor dourado de altar barroco atrás da capa */
.subsolo { --ceu-1: #2f434a; --ceu-2: #4f676e; --ceu-3: #7f979b; --aurora: #e2b48f; --terra: #b4432f; --ouro: #d2ab5c; --ouro-2: #f1d698; --creme: #f3e7d0; --creme-2: #cdd6d4; --tinta: #1c1a17;
  --gravura: 'IM Fell English', 'Iowan Old Style', Georgia, serif; --versal: 'IM Fell English SC', 'IM Fell English', Georgia, serif; --corpo: 'Spectral', Georgia, serif;
  position: relative; z-index: 3; margin-top: -14vh; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(2rem, 5vw, 6rem);
  min-height: calc(100vh + 14vh); padding: calc(14vh + 10vh) var(--pad) calc(14vh + 13vh); color: var(--creme);
  background: radial-gradient(ellipse 55% 50% at 74% 52%, rgba(241, 214, 152, .28), transparent 70%),
              linear-gradient(180deg, var(--ceu-1) 0%, var(--ceu-2) 38%, var(--ceu-3) 74%, #b9a48f 90%, var(--aurora) 100%); }
/* papel envelhecido por cima de tudo, bem de leve, como na capa */
.subsolo::before { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .28; mix-blend-mode: soft-light; background: url(../assets/brand/noise.png); background-size: 220px; }

/* nuvens de forro: manchas claras, desfocadas, que atravessam o céu muito devagar */
.subsolo__nuvem { position: absolute; z-index: -1; border-radius: 50%; filter: blur(40px); pointer-events: none; background: radial-gradient(ellipse at 50% 55%, rgba(243, 231, 208, .55), rgba(243, 231, 208, .18) 45%, transparent 70%); }
.subsolo__nuvem--a { left: -8vw; top: 8%; width: 48vw; height: 22vh; animation: nuvem 70s linear infinite alternate; }
.subsolo__nuvem--b { right: -12vw; top: 30%; width: 40vw; height: 18vh; opacity: .7; animation: nuvem 90s linear infinite alternate-reverse; }
.subsolo__nuvem--c { left: 20vw; bottom: 10%; width: 60vw; height: 20vh; opacity: .55; background: radial-gradient(ellipse at 50% 55%, rgba(242, 196, 160, .6), transparent 70%); animation: nuvem 110s linear infinite alternate; }
@keyframes nuvem { from { transform: translateX(0); } to { transform: translateX(8vw); } }

/* ---------- texto ---------- */
.subsolo__txt { position: relative; z-index: 2; max-width: 40rem; }
.subsolo__lema { display: inline-flex; align-items: center; gap: .9rem; font-family: var(--gravura); font-size: clamp(1.25rem, 1rem + .7vw, 1.7rem); color: var(--ouro-2); }
.subsolo__lema svg { width: 2rem; height: 2rem; flex: none; color: var(--ouro); }
.subsolo__titulo { margin-top: 1.5rem; font-family: var(--versal); font-weight: 400; font-size: clamp(2.8rem, 5.4vw, 6.2rem); line-height: .98; letter-spacing: .035em; color: var(--creme); text-shadow: 0 2px 30px rgba(31, 46, 52, .45); }
.subsolo__titulo span { display: block; max-width: 30ch; margin-top: 1.3rem; font-family: var(--gravura); font-style: italic; font-size: clamp(1.3rem, 1.05rem + .8vw, 1.95rem); line-height: 1.2; letter-spacing: 0; color: var(--creme-2); }
.subsolo__autor { display: grid; justify-items: start; gap: .7rem; margin-top: 2rem; font-family: var(--versal); font-size: clamp(1.25rem, 1.6vw, 1.6rem); letter-spacing: .18em; color: var(--creme); }
.subsolo__autor .vinheta { width: 12rem; height: auto; color: var(--ouro); }
.subsolo__lead { max-width: 34ch; margin-top: 1.4rem; font-family: var(--corpo); font-size: clamp(1.2rem, 1.5vw, 1.5rem); line-height: 1.45; color: rgba(243, 231, 208, .9); }
.subsolo__cita { margin: 2rem 0 0; }
.subsolo__cita p { font-family: var(--gravura); font-style: italic; font-size: clamp(1.45rem, 2.2vw, 2.2rem); line-height: 1.2; color: var(--ouro-2); }
.subsolo__acao { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.6rem; }
.subsolo__btn { display: inline-flex; align-items: center; gap: 1.2rem; padding: 1.05rem 1.1rem 1.05rem 2.1rem; border-radius: 3rem; background: linear-gradient(180deg, var(--ouro-2), var(--ouro)); color: var(--tinta); text-decoration: none; font-family: var(--corpo); font-weight: 500; font-size: 1.08rem; letter-spacing: .02em; box-shadow: 0 10px 30px -10px rgba(31, 26, 21, .5), inset 0 1px 0 rgba(255, 255, 255, .5); transition: translate .6s var(--ease), box-shadow .4s; }
.subsolo__btn i { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--tinta); color: var(--ouro-2); font-style: normal; transition: translate .6s var(--ease); }
.subsolo__btn:hover { translate: 0 -3px; box-shadow: 0 16px 40px -12px rgba(31, 26, 21, .6), 0 0 40px rgba(241, 214, 152, .45), inset 0 1px 0 rgba(255, 255, 255, .5); }
.subsolo__btn:hover i { translate: 4px 0; }
.subsolo__btn:focus-visible { outline: 2px solid var(--creme); outline-offset: 4px; }
.subsolo__meta { font-family: var(--corpo); font-style: italic; font-size: 1rem; color: var(--creme-2); }

/* ---------- a capa diante de um resplendor de altar ---------- */
.subsolo__capa { position: relative; z-index: 1; justify-self: center; display: block; width: min(30vw, 420px); }
.subsolo__capa img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(241, 214, 152, .65), 0 0 0 7px rgba(47, 67, 74, .35), 0 0 0 8px rgba(241, 214, 152, .4), 0 60px 90px -30px rgba(20, 28, 31, .85);
  transform: rotate(-2deg); will-change: transform; }
/* raios dourados finos e longos, como a glória de um retábulo; giram quase parados */
.subsolo__gloria { position: absolute; left: 50%; top: 48%; z-index: 0; width: 280%; aspect-ratio: 1; margin: -140% 0 0 -140%; transform-origin: 50% 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(241, 214, 152, .34) 0deg 1.1deg, transparent 1.1deg 6deg),
              repeating-conic-gradient(from 3deg, rgba(241, 214, 152, .16) 0deg .5deg, transparent .5deg 6deg);
  -webkit-mask-image: radial-gradient(circle, transparent 9%, #000 15%, rgba(0, 0, 0, .55) 32%, transparent 52%); mask-image: radial-gradient(circle, transparent 9%, #000 15%, rgba(0, 0, 0, .55) 32%, transparent 52%);
  animation: gloria 160s linear infinite; }
.subsolo__capa::before { content: ''; position: absolute; left: 50%; top: 48%; z-index: 0; width: 170%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 236, 190, .55) 0%, rgba(241, 214, 152, .2) 30%, transparent 62%); }
@keyframes gloria { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .subsolo__gloria, .subsolo__nuvem { animation: none; } }

@media (max-width: 900px) {
  .subsolo { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 3.4rem; margin-top: -10vh; min-height: 0; padding: calc(10vh + 7vh) var(--pad) calc(10vh + 12vh); }
  .subsolo__capa { order: -1; width: min(62vw, 290px); }
  .subsolo__txt { display: grid; justify-items: center; }
  .subsolo__titulo { font-size: clamp(2.3rem, 10.5vw, 3.4rem); }
  .subsolo__titulo span { margin-inline: auto; }
  .subsolo__autor { justify-items: center; }
  .subsolo__acao { justify-content: center; }
  .subsolo__nuvem--a { width: 90vw; } .subsolo__nuvem--b { width: 80vw; }
}

/* v2: capa maior, texto menor (proporção mais equilibrada) */
.subsolo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.subsolo__capa { width: min(36vw, 520px); }
.subsolo__titulo { font-size: clamp(2.4rem, 4.2vw, 4.6rem); }
.subsolo__titulo span { font-size: clamp(1.15rem, 1rem + .55vw, 1.55rem); }
.subsolo__lead { font-size: clamp(1.08rem, 1.2vw, 1.25rem); }
.subsolo__cita p { font-size: clamp(1.25rem, 1.7vw, 1.7rem); }
.subsolo__autor { font-size: clamp(1.1rem, 1.3vw, 1.3rem); }
@media (max-width: 900px) { .subsolo { grid-template-columns: 1fr; } .subsolo__capa { width: min(72vw, 330px); } .subsolo__titulo { font-size: clamp(2.2rem, 9.6vw, 3rem); } }