/* Mujer de Fe · la portadilla de cada página (26-10-2026, el diseño de luz): la foto de noche que amanece al llegar, con el
   título en la caligrafía, dorado, que se escribe solo. paginas.js pone la foto en WebGL (comun/foto-luz.js: el lienzo,
   que aparece encima cuando está listo, «con-luz»); sin WebGL, la foto amanece con filtros («amanecida»). Al bajar, el
   texto sube y se desvanece (--salida, de 0 a 1). Abajo funde con la crema del contenido. */

.portadilla {
  --salida: 0;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  min-height: clamp(500px, 80vh, 820px); padding: 130px var(--margen) 120px;
  background: var(--noche); color: #F8EBD9; text-align: center;
}
.portadilla-breve { min-height: clamp(360px, 52vh, 520px); padding-bottom: 90px; }

.portadilla-foto, .portadilla-lienzo, .portadilla-estrellas { position: absolute; inset: 0; z-index: -3; }
.portadilla-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.portadilla-lienzo { width: 100%; height: 100%; z-index: -2; opacity: 0; transition: opacity 1s ease; }
.con-luz .portadilla-lienzo { opacity: 1; }

/* De la hora azul a la luz: así empieza la foto (como el WebGL en su primer fotograma) y, si no hay WebGL, amanece con filtros */
.efectos .portadilla-foto img { filter: saturate(.35) brightness(.55); transition: filter 2.8s var(--curva), transform 6s var(--curva); }
.efectos .portadilla-foto::after {
  content: ""; position: absolute; inset: 0; background: rgb(64, 74, 150); mix-blend-mode: multiply; opacity: .5;
  transition: opacity 2.8s var(--curva);
}
.amanecida .portadilla-foto img { filter: none; transform: none; }
.amanecida .portadilla-foto::after { opacity: 0; }

/* Sin foto (textos legales, error): una noche con estrellas que titilan */
.portadilla-noche { background: radial-gradient(ellipse at 50% 120%, #4A2440 0%, #241426 40%, #0E0812 100%); }
.portadilla-estrellas, .portadilla-estrellas::after {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(243, 212, 138, .9), transparent),
    radial-gradient(1.2px 1.2px at 32% 64%, rgba(243, 212, 138, .7), transparent),
    radial-gradient(2px 2px at 58% 28%, rgba(255, 233, 184, .8), transparent),
    radial-gradient(1.4px 1.4px at 76% 72%, rgba(243, 212, 138, .7), transparent),
    radial-gradient(1.8px 1.8px at 88% 12%, rgba(255, 233, 184, .9), transparent),
    radial-gradient(1.2px 1.2px at 46% 88%, rgba(233, 121, 146, .7), transparent);
  background-size: 360px 360px;
}
.portadilla-estrellas::after { content: ""; position: absolute; inset: 0; background-size: 220px 220px; background-position: 60px 100px; animation: titilar-estrellas 4s ease-in-out infinite alternate; }
@keyframes titilar-estrellas { to { opacity: .2; } }

/* El velo: oscuro arriba (para la cabecera) y en el centro (para el título), y abajo funde con la crema del contenido */
.portadilla-velo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 50% 52%, rgba(20, 12, 22, .55), rgba(20, 12, 22, .12) 75%, rgba(20, 12, 22, 0)),
    linear-gradient(180deg, rgba(20, 12, 22, .6) 0%, rgba(20, 12, 22, 0) 26%, rgba(20, 12, 22, 0) 72%, rgba(255, 248, 240, .55) 92%, var(--crema) 100%);
}

/* ---------- El texto ---------- */
.portadilla-texto {
  position: relative; max-width: 860px;
  opacity: calc(1 - var(--salida) * 1.7); translate: 0 calc(var(--salida) * -70px);
}
.portadilla-titulo { margin: 0; line-height: .9; font-weight: 400; }
.escritura {
  display: inline-block; padding: .08em .16em .22em;
  font-size: clamp(88px, 12vw, 180px);
  /* oro con un reflejo que pasa, y un resplandor alrededor (como «Mujer de Fe» en la portada) */
  background: linear-gradient(100deg, #E8B95A 0%, #FFF1C9 18%, #E2AE4E 36%, #F7D58C 50%, #FFF6DD 58%, #D9A546 76%, #F3D48A 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(243, 190, 100, .45)) drop-shadow(0 2px 14px rgba(20, 12, 22, .6));
  animation: reflejo-oro 6s ease-in-out infinite alternate;
}
@keyframes reflejo-oro { to { background-position: 100% 0; } }
/* se escribe sola, de izquierda a derecha */
.efectos .escritura { animation: escribir 2.4s .5s cubic-bezier(.65, 0, .35, 1) both, reflejo-oro 6s ease-in-out infinite alternate; }
@keyframes escribir { from { clip-path: inset(-30% 100% -40% -10%); } to { clip-path: inset(-30% -10% -40% -10%); } }

.portadilla-titulo-serif {
  max-width: 18em; margin: 6px auto 22px; color: #FFF8EC;
  font: 500 clamp(34px, 4.6vw, 62px)/1.12 var(--serif); text-wrap: balance;
  text-shadow: 0 2px 30px rgba(20, 12, 22, .7);
}
.portadilla-lema { margin: 4px 0 14px; font: 600 clamp(13px, 1.15vw, 16px)/1.5 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--oro-claro); text-shadow: 0 1px 12px rgba(20, 12, 22, .7); }
.portadilla-intro { max-width: 32em; margin: 0 auto; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: rgba(248, 235, 217, .9); text-shadow: 0 1px 14px rgba(20, 12, 22, .8); }

/* lo de debajo del título entra tras él */
.efectos .portadilla-texto > :not(.portadilla-titulo):not(.portadilla-titulo-serif) { animation: subir-luz 1.4s var(--curva) both; animation-delay: 1.6s; }
.efectos .portadilla-texto > .antetitulo { animation-delay: .2s; }
.efectos .portadilla-titulo-serif { animation: subir-luz 1.4s .3s var(--curva) both; }
@keyframes subir-luz { from { opacity: 0; translate: 0 26px; filter: blur(6px); } }

/* «Desliza»: una línea de luz que cae una y otra vez */
.portadilla .desliza { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; opacity: calc(1 - var(--salida) * 3); }
.portadilla-breve .desliza { display: none; }
.desliza-linea { position: relative; display: block; width: 1.5px; height: 46px; overflow: hidden; background: rgba(74, 44, 29, .18); }
.desliza-linea::after { content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%; background: var(--oro); animation: caer 2s var(--curva) infinite; }
@keyframes caer { to { top: 110%; } }

@media (max-width: 700px) {
  .portadilla { min-height: clamp(460px, 78svh, 680px); padding: 110px var(--margen) 100px; }
  .portadilla-breve { min-height: 340px; }
  .escritura { font-size: clamp(72px, 21vw, 110px); }
}