/* Mujer de Fe · portada · 5. La luz que da forma: las partículas del lienzo forman el sol, la cruz, el corazón y «Fe» (a la izquierda; en
   vertical, arriba). Aquí, el texto de cada forma: sol (Juan 8:12), cruz (Juan 3:16), corazón (Jeremías 31:3) y
   «Fe» (Hebreos 11:1). principal.js marca la activa. */

.formas { position: relative; z-index: 2; background: var(--noche); }
.con-3d .formas { background: none; }
.formas-escena { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; }

.formas-textos {
  position: absolute; top: 50%; right: max(var(--margen), calc((100vw - 1400px) / 2)); translate: 0 -50%;
  display: grid; width: min(40%, 520px); color: #F8EBD9;
}
.forma-texto { grid-area: 1 / 1; align-self: center; }
.forma-texto blockquote p { margin: 0 0 14px; font: 400 clamp(22px, 2.1vw, 31px)/1.45 var(--serif); font-style: italic; color: #FBF1E2; text-shadow: 0 2px 20px rgba(7, 4, 10, .8); }
.forma-texto cite { display: block; margin-bottom: 26px; font: 600 12.5px/1 var(--sans); font-style: normal; letter-spacing: .26em; text-transform: uppercase; color: var(--oro-claro); }
.forma-pista { margin: 18px 0 0; font: 600 11px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(243, 212, 138, .65); }

/* Con 3D, solo se ve el texto de la forma activa; sin él, se leen todos uno debajo de otro */
.con-3d .forma-texto { opacity: 0; visibility: hidden; translate: 0 30px; transition: opacity .6s, translate .8s var(--curva), visibility 0s .8s; }
.con-3d .forma-texto.activa { opacity: 1; visibility: visible; translate: none; transition: opacity .8s .1s, translate 1s .1s var(--curva), visibility 0s; }
html:not(.con-3d) .formas-escena { height: auto; min-height: 0; padding: 90px var(--margen); }
html:not(.con-3d) .formas-textos { position: static; translate: none; width: auto; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
html:not(.con-3d) .formas-puntos { display: none; }

.formas-puntos { position: absolute; left: var(--margen); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 14px; }
.formas-puntos li { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(243, 212, 138, .6); transition: background .4s, box-shadow .4s, scale .4s; }
.formas-puntos li.activo { background: var(--oro-claro); box-shadow: 0 0 12px var(--oro-claro); scale: 1.3; }

@media (max-width: 800px) {
  .formas-textos { top: auto; bottom: 30px; left: var(--margen); right: var(--margen); translate: none; width: auto; text-align: center; }
  .forma-texto blockquote p { font-size: 18px; }
  .forma-texto cite { margin-bottom: 14px; }
  .formas-puntos { left: 50%; top: 84px; translate: -50% 0; flex-direction: row; }
}