/* Mujer de Fe · portada · 4. La lámpara: el Salmo 119:105 casi no se ve sobre la noche. Hay dos capas iguales del versículo: la apagada,
   cuyas palabras se encienden al bajar, y la encendida, en oro, que solo se ve dentro del halo de la lámpara
   (--lx, --ly: dónde está; lo mueve lampara.js con el ratón o con el dedo). Las estrellas del lienzo se ven detrás. */

.lampara { position: relative; z-index: 2; background: var(--noche); }
.con-3d .lampara { background: radial-gradient(ellipse at 50% 50%, rgba(7, 4, 10, .55), rgba(7, 4, 10, .25) 70%); }
.lampara-escena {
  --lx: 50%; --ly: 45%; --radio: clamp(140px, 18vw, 260px);
  position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 90px var(--margen) 50px; text-align: center; color: #F8EBD9;
}

.lampara-versiculo { position: relative; display: grid; max-width: 1180px; }
.lampara-capa { grid-area: 1 / 1; margin: 0; }
.lampara-capa p { margin: 0; font: 500 clamp(32px, 5vw, 84px)/1.14 var(--serif); letter-spacing: -.01em; }
.lampara-apagada .palabra { color: rgba(248, 235, 217, .1); }
.lampara-encendida {
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--radio) at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%);
  mask-image: radial-gradient(circle var(--radio) at var(--lx) var(--ly), #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%);
}
.lampara-encendida p {
  background: linear-gradient(180deg, #FFF6DC, var(--oro-claro) 55%, #E0B25A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(243, 212, 138, .55));
}
/* sin efectos, el versículo se lee entero */
html:not(.efectos) .lampara-apagada .palabra { color: var(--oro-claro); }
html:not(.efectos) .lampara-encendida { display: none; }

.lampara-halo {
  position: absolute; left: 0; top: 0; width: calc(var(--radio) * 3.2); height: calc(var(--radio) * 3.2);
  margin: calc(var(--radio) * -1.6) 0 0 calc(var(--radio) * -1.6); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 220, 150, .26), rgba(255, 190, 120, .09) 35%, transparent 65%);
  mix-blend-mode: screen; will-change: transform;
}
html:not(.efectos) .lampara-halo { display: none; }

.lampara-texto { position: relative; max-width: 640px; margin-top: clamp(16px, 4vh, 44px); }
.lampara-texto h2 { margin: 0 0 8px; font-size: clamp(50px, 6vw, 84px); line-height: 1; color: var(--luz); text-shadow: 0 0 30px rgba(243, 212, 138, .45); }
.lampara-texto p { margin: 0 auto 26px; max-width: 34em; color: rgba(248, 235, 217, .82); font-size: 17.5px; }
.efectos .lampara-texto { opacity: 0; }

.lampara-pista {
  position: absolute; bottom: 26px; left: 0; right: 0; margin: 0;
  font: 600 10.5px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: rgba(243, 212, 138, .6);
}
html:not(.efectos) .lampara-pista { display: none; }

@media (max-width: 700px) {
  .lampara-escena { padding-top: 80px; gap: 6px; }
  .lampara-texto p { font-size: 16px; }
}