/* ═══════════════════════════════════════════════════════════════
   NARÄ · editorial
   Las páginas internas como pieza editorial: la pantalla entera es
   el lienzo, la fotografía manda y el scroll es el relato.

   El guion no anima nada directamente: calcula cuánto se lleva
   recorrido de cada escena y lo deja en --p (0 → 1). Todo lo visual
   ocurre aquí, de modo que sin JavaScript la página sigue siendo
   legible y con movimiento reducido se queda quieta.
   ═══════════════════════════════════════════════════════════════ */

.ed{--p:0;position:relative}

/* ─────────── 1 · portada ───────────
   Portada tomada del archivo de referencia de NARÄ, con sus medidas y sus
   proporciones: la fotografía llena la pantalla, el rótulo se apoya abajo
   a la izquierda y el degradado cierra hacia el fondo. Las tipografías son
   las del sitio (Playfair y Jost), no las del archivo.
   Va igual en todas las páginas internas: solo cambian foto y texto.   */
.ed-abre{position:relative;min-height:100svh;width:100vw;
  margin-inline:calc(50% - 50vw);overflow:hidden;
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:0 clamp(20px,6vw,80px) clamp(56px,9vh,80px)}

.ed-abre .ed-foto{position:absolute;inset:0;z-index:0}
.ed-abre .ed-foto img{width:100%;height:100%;object-fit:cover;display:block;
  object-position:center 30%;
  transform:scale(calc(1.08 - .08 * var(--p)))}
.ed-abre .ed-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(36,27,20,.15) 0%,
    rgba(36,27,20,.55) 70%,rgba(36,27,20,.96) 100%)}

.ed-abre .ed-rotulo{position:relative;z-index:3;max-width:720px}
.ed-abre .ed-label{display:block;margin-bottom:18px;
  font-family:var(--serif);font-size:14px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--oro-claro)}
.ed-abre h1{font-family:var(--serif);font-weight:500;text-transform:uppercase;
  font-size:clamp(42px,8vw,92px);line-height:.95;letter-spacing:.01em;
  color:var(--claro);margin:0}
.ed-abre .ed-sub{max-width:520px;margin-top:24px;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(18px,2.2vw,24px);line-height:1.5;color:var(--claro-2)}

.ed-abre .ed-gesto{position:absolute;left:50%;bottom:32px;z-index:3;
  transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:8px;pointer-events:none;
  font-family:var(--sans);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--claro-2);
  opacity:calc(1 - var(--p) * 2.4)}
.ed-abre .ed-gesto i{display:block;width:1px;height:38px;
  background:linear-gradient(180deg,var(--oro-claro),transparent);
  animation:latido 2s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:.3}50%{opacity:1}}

/* ─────────── 2 · escena fija: la imagen se queda, el texto entra ───────────
   El bloque alto da la distancia; dentro, el escenario pegajoso sostiene
   la fotografía mientras el texto llega desde un lateral.           */
.ed-fija{position:relative}
.ed-fija .ed-alto{position:relative;height:300svh}
.ed-fija .ed-escena{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center}

.ed-fija .ed-marco{position:absolute;overflow:hidden;
  /* arranca ocupando casi todo y se recoge a una lámina alta y estrecha */
  inset:calc(var(--p) * 11%) calc(var(--p) * 46%) calc(var(--p) * 11%) calc(var(--p) * 6%);
  transition:none}
.ed-fija .ed-marco img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(calc(1.14 - .14 * var(--p)))}
.ed-fija .ed-marco::after{content:'';position:absolute;inset:0;
  background:rgba(24,18,12,calc(.42 - .34 * var(--p)))}

.ed-fija .ed-dicho{position:relative;z-index:2;justify-self:end;align-self:center;
  width:min(40ch,38vw);margin-right:clamp(26px,6vw,96px);
  /* entra desde el lateral derecho, y solo cuando la imagen ya se recogió */
  opacity:clamp(0,calc((var(--p) - .34) * 3.4),1);
  transform:translateX(calc((1 - clamp(0,(var(--p) - .34) * 3.4,1)) * 56px))}
.ed-fija .ed-dicho h2{font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.08;
  margin:.3em 0 .6em}
.ed-fija .ed-dicho p{color:var(--tinta-2);line-height:1.75}
.ed-fija .ed-dicho p + p{margin-top:1em}

/* ─────────── 3 · viaje: desplazamiento lateral ───────────
   Lo que se baja se convierte en avance horizontal. Las láminas van a
   distinta altura para que la fila no se lea como una rejilla.   */
.ed-viaje{position:relative}
.ed-viaje .ed-alto{position:relative}
.ed-viaje .ed-escena{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center}
.ed-viaje .ed-tira{display:flex;gap:clamp(18px,3vw,54px);
  padding-inline:clamp(22px,10vw,180px);
  transform:translate3d(calc(var(--p) * var(--tope,0px) * -1),0,0)}
.ed-viaje figure{flex:0 0 auto;margin:0;overflow:hidden;
  width:clamp(210px,23vw,360px);height:clamp(300px,54vh,520px);
  background:var(--arena-3)}
.ed-viaje figure:nth-child(2n){align-self:flex-end;margin-bottom:clamp(20px,6vh,66px)}
.ed-viaje figure:nth-child(3n){align-self:flex-start;margin-top:clamp(16px,5vh,54px)}
.ed-viaje figure img{width:100%;height:100%;object-fit:cover;display:block}

.ed-viaje .ed-titulo{position:absolute;left:clamp(22px,10vw,180px);
  top:clamp(70px,13vh,120px);z-index:2;pointer-events:none;max-width:22ch}
.ed-viaje .ed-titulo h2{font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.1}

/* ─────────── 4 · composición asimétrica, con vacío ─────────── */
.ed-par{padding-block:clamp(90px,16vh,190px)}
.ed-par .ed-in{width:min(100% - var(--borde)*2,var(--ancho));margin-inline:auto;
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2.4vw,34px);align-items:end}
.ed-par .ed-grande{grid-column:1 / 8;aspect-ratio:4/5;overflow:hidden;
  background:var(--arena-3)}
.ed-par .ed-chica{grid-column:9 / 13;aspect-ratio:3/4;overflow:hidden;
  background:var(--arena-3);margin-bottom:clamp(40px,9vh,110px)}
.ed-par figure{margin:0}
.ed-par img{width:100%;height:100%;object-fit:cover;display:block;
  transform:translateY(calc((var(--p) - .5) * -40px)) scale(1.06)}
.ed-par .ed-nota{grid-column:9 / 13;color:var(--tinta-2);line-height:1.75}

/* ─────────── 5 · cierre contemplativo ─────────── */
.ed-cierra{position:relative;height:100svh;overflow:hidden;
  margin-inline:calc(50% - 50vw);width:100vw;display:grid;place-items:center}
.ed-cierra .ed-foto{position:absolute;inset:0}
.ed-cierra .ed-foto img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(calc(1.18 - .18 * var(--p)))}
.ed-cierra::after{content:'';position:absolute;inset:0;
  background:rgba(24,18,12,.52)}
.ed-cierra .ed-frase{position:relative;z-index:2;color:var(--claro);
  text-align:center;max-width:22ch;padding-inline:24px;
  font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.8rem);line-height:1.25;
  opacity:clamp(0,calc(var(--p) * 2.2),1)}

/* ─────────── móvil: composición propia, no el escritorio encogido ───────────
   Se renuncia a fijar y a los laterales, pero no al tamaño de la imagen,
   al vacío ni al movimiento: las fotografías siguen llenando la pantalla
   y el texto respira entre ellas.                                   */
@media (max-width:860px){
  /* la portada conserva su composición: la foto sigue llenando la pantalla
     y el rótulo se apoya abajo, solo se aprieta el cuerpo del texto */
  .ed-abre{min-height:92svh;padding-bottom:clamp(64px,12vh,88px)}
  .ed-abre .ed-label{font-size:12px;letter-spacing:.24em;margin-bottom:14px}
  .ed-abre .ed-sub{font-size:clamp(16px,4.2vw,19px);margin-top:18px}

  .ed-fija .ed-alto{height:auto}
  .ed-fija .ed-escena{position:static;height:auto;display:block}
  .ed-fija .ed-marco{position:relative;inset:auto;height:78svh;width:100%}
  .ed-fija .ed-marco img{transform:none}
  .ed-fija .ed-marco::after{background:rgba(24,18,12,.1)}
  .ed-fija .ed-dicho{width:auto;margin:clamp(30px,7vw,48px) clamp(22px,6vw,34px) 0;
    opacity:1;transform:none}

  .ed-viaje .ed-alto{height:auto !important}
  .ed-viaje .ed-escena{position:static;height:auto;display:block;
    padding-block:clamp(40px,9vh,70px)}
  .ed-viaje .ed-titulo{position:static;margin:0 clamp(22px,6vw,34px) clamp(24px,5vw,34px)}
  .ed-viaje .ed-tira{transform:none !important;overflow-x:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    padding-inline:clamp(22px,6vw,34px);gap:12px}
  .ed-viaje .ed-tira::-webkit-scrollbar{display:none}
  .ed-viaje figure{width:76vw;height:62svh;scroll-snap-align:center;
    align-self:auto !important;margin:0 !important}

  .ed-par{padding-block:clamp(56px,11vh,90px)}
  .ed-par .ed-in{grid-template-columns:1fr;gap:clamp(18px,5vw,30px)}
  .ed-par .ed-grande,.ed-par .ed-chica,.ed-par .ed-nota{grid-column:1}
  .ed-par .ed-grande{aspect-ratio:4/5}
  .ed-par .ed-chica{aspect-ratio:1/1;margin-bottom:0;
    width:72%;margin-left:auto}
  .ed-par img{transform:none}

  .ed-cierra{height:88svh}
  .ed-canto{display:none}
}

@media (prefers-reduced-motion:reduce){
  .ed-abre .ed-foto img,.ed-cierra .ed-foto img,.ed-fija .ed-marco img,
  .ed-par img{transform:none !important}
  .ed-abre .ed-rotulo{transform:none}
  .ed-fija .ed-dicho,.ed-cierra .ed-frase{opacity:1 !important;transform:none !important}
  .ed-fija .ed-marco{inset:0 46% 0 6%}
  .ed-gesto{opacity:1}
}

/* ─────────── índice: las puertas, sin tarjetas ───────────
   Navegación tratada como índice de revista: líneas grandes separadas por
   un filete. Al pasar por encima, la línea se desplaza y su número se
   enciende. Nada de cajas ni rejilla.                                */
.ed-indice{padding-block:clamp(70px,13vh,150px)}
.ed-indice .ed-in{width:min(100% - var(--borde)*2,var(--ancho));margin-inline:auto}
.ed-indice .ed-cabe{max-width:34ch;margin-bottom:clamp(30px,5vh,60px)}
.ed-indice ol{list-style:none;margin:0;padding:0;border-top:1px solid rgba(39,33,25,.14)}
.ed-indice li{border-bottom:1px solid rgba(39,33,25,.14)}
.ed-indice a{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:clamp(16px,3vw,44px);padding:clamp(22px,3.4vh,38px) 0;
  transition:padding-left .55s var(--suave),color .45s ease}
.ed-indice a:hover,.ed-indice a:focus-visible{padding-left:clamp(10px,1.6vw,24px)}
.ed-indice .n{font-family:var(--serif);font-style:italic;font-size:.95rem;
  color:var(--tinta-3);transition:color .45s ease}
.ed-indice a:hover .n{color:rgb(var(--ac))}
.ed-indice h3{font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.1;font-weight:400}
.ed-indice .q{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-3);white-space:nowrap}
.ed-indice p{grid-column:2;color:var(--tinta-2);margin-top:.5em;max-width:52ch}
@media (max-width:860px){
  .ed-indice a{grid-template-columns:auto 1fr;gap:14px}
  .ed-indice .q{display:none}
}

/* ─────────── geometría de la portada ───────────
   Portada del archivo de referencia: los ornamentos de los cantos, el
   resplandor con su mandala girando y los destellos. Viven dentro de la
   portada, que es donde el fondo es oscuro y la línea dorada se lee.
   Todo es decorativo: se construye desde el guion y no estorba al texto. */
.ed-abre .ed-orn{position:absolute;top:0;bottom:0;width:130px;z-index:1;
  pointer-events:none;opacity:.55;mix-blend-mode:screen;
  display:flex;align-items:center;justify-content:center}
.ed-abre .ed-orn.izq{left:0}
.ed-abre .ed-orn.der{right:0;transform:scaleX(-1)}
.ed-abre .ed-orn svg{width:100%;height:auto;max-height:88svh}
.ed-abre .ed-orn .rayo{animation:ornLatido 5s ease-in-out infinite;transform-origin:center}
.ed-abre .ed-orn .nucleo{animation:ornBrillo 4s ease-in-out infinite}
.ed-abre .ed-orn .punto{animation:ornTitila 3.2s ease-in-out infinite}
@keyframes ornLatido{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes ornBrillo{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes ornTitila{0%,100%{opacity:.3}50%{opacity:1}}

.ed-abre .ed-chispas{position:absolute;inset:0;z-index:1;pointer-events:none}
.ed-abre .ed-chispas span{position:absolute;border-radius:50%;
  background:var(--oro-claro);box-shadow:0 0 6px 1px rgba(232,210,160,.8);
  animation:chispa var(--dur,4s) ease-in-out infinite;animation-delay:var(--delay,0s)}
@keyframes chispa{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.95;transform:scale(1.3)}}

.ed-abre .ed-brillo{position:absolute;top:38%;left:50%;z-index:1;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.45;
  width:min(70vw,700px);height:min(70vw,700px)}
.ed-abre .ed-brillo .nucleo-luz{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(232,210,160,.55) 0%,
    rgba(232,210,160,.12) 40%,transparent 70%);
  animation:luzLatido 6s ease-in-out infinite}
.ed-abre .ed-brillo .mandala{position:absolute;inset:0;width:100%;height:100%;
  animation:mandalaGira 90s linear infinite}
@keyframes luzLatido{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes mandalaGira{from{transform:rotate(0)}to{transform:rotate(360deg)}}

@media (max-width:640px){
  .ed-abre .ed-orn{width:70px;opacity:.4}
  .ed-abre .ed-brillo{opacity:.3}
}
@media (max-width:420px){ .ed-abre .ed-orn{display:none} }
@media (prefers-reduced-motion:reduce){
  .ed-abre .ed-orn .rayo,.ed-abre .ed-orn .nucleo,.ed-abre .ed-orn .punto,
  .ed-abre .ed-chispas span,.ed-abre .ed-brillo .nucleo-luz,
  .ed-abre .ed-brillo .mandala{animation:none}
}