/* Mujer de Fe · portada · 0. La intro: mientras carga el mundo 3D (las fotos, el logo y las fuentes), un aro de oro que se dibuja
   sobre la noche con «Mujer de Fe» dentro. Se va en cuanto la luz empieza a llegar (principal.js). */

.intro { display: none; }
/* desde el primer pintado (con-js lo pone el script del head), para que no se vea la página sin preparar;
   si algo falla y nadie la quita, se va sola a los 9 s */
.con-js .intro {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, #241426, var(--noche) 55%, #07040A);
  animation: retirada .8s 9s forwards;
}
@keyframes retirada { to { opacity: 0; visibility: hidden; } }
.intro > * { grid-area: 1 / 1; }
.intro-aro { width: min(42vmin, 300px); overflow: visible; animation: girar-intro 6s linear infinite; }
.intro-aro circle {
  fill: none; stroke: var(--oro-claro); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: dibujar-aro 2.2s var(--curva) forwards;
  filter: drop-shadow(0 0 8px rgba(243, 212, 138, .9));
}
@keyframes dibujar-aro { to { stroke-dashoffset: 0; } }
@keyframes girar-intro { to { rotate: 360deg; } }
.intro-logo {
  margin: 0; font: 400 clamp(54px, 8vmin, 84px)/1 var(--caligrafia); color: var(--luz);
  text-shadow: 0 0 24px rgba(243, 212, 138, .6); opacity: 0; animation: aparecer-logo 1.6s .4s ease forwards;
}
@keyframes aparecer-logo { to { opacity: 1; } }