/* Claude · ronda 3 del refinamiento [PROPOSAL] · 20/10/2026 */

/* 3.1 · peso inicial: el fondo de los créditos de la noche se pide al acercarse (app.js añade .noche-cerca) */
#noche:not(.noche-cerca) .noche-creditos::before { background-image:none; }

/* 3.2 · documental: un solo botón propio de pantalla completa, dentro del marco (arriba a la derecha), y los chips atenuados
   mientras caen sobre el reproductor (astra-documental.js añade .chips-sobre-doc) */
.doc-largo { position:relative; }
.doc-largo [data-doc-fullscreen] { position:absolute; top:10px; left:10px; z-index:3; background:rgb(8 12 18/.55); }
.chips { transition:opacity .3s ease; }
/* (revisión) la pausa general sigue siendo tocable siempre (WCAG 2.2.2): los chips solo se atenúan */
.chips-sobre-doc .chips { opacity:.4; }
.chips-sobre-doc .chips:hover, .chips-sobre-doc .chips:focus-within { opacity:1; }

/* 3.3 · primero la escena, después la frase (apilado): app.js marca .r3-espera mientras la lámina no cubre su parte del visor */
.r3-cubre { transition:opacity .7s cubic-bezier(.22,.61,.36,1); }
.r3-cubre.r3-espera { opacity:0 !important; }
.r3-cubre:focus-within { opacity:1 !important; }

/* 3.5 · el taller en vertical, sin la página de azul liso: la misma mesa de la lámpara, desenfocada y en penumbra, continúa detrás del
   titular y de la segunda frase; la lámina nítida (el portátil y la mano, sin recortar) se funde en ella en vez de en azul, y al final
   la escena baja al azul noche del documental con un degradado de ~0,4 pantallas. Sin texto nuevo; la lámina no cambia de tamaño. */
@media (orientation:portrait){
  html:not(.pelicula) .taller .escena { isolation:isolate; overflow:hidden; padding-bottom:clamp(56px,14svh,120px); }
  html:not(.pelicula) .taller .escena::before {
    content:""; position:absolute; inset:-6% -12%; z-index:-1; pointer-events:none;
    background:url(kit/img/laptop-plate-960.webp) 63% 46% / cover no-repeat;
    filter:blur(20px) brightness(.5) saturate(1.1);
  }
  html:not(.pelicula) .taller .escena::after {
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(rgb(10 8 6/.55), rgb(10 8 6/0) 12%, rgb(10 8 6/0) 64%, rgb(var(--fondo-rgb)/.55) 84%, var(--fondo));
  }
  html:not(.pelicula) .taller .escena-banda { background:transparent; }
  html:not(.pelicula) .taller .escena-banda::after { display:none; }
  html:not(.pelicula) .taller .escena-velo { background:none; }
  html:not(.pelicula) .taller .lienzo-marco { -webkit-mask-image:linear-gradient(transparent, #000 22%, #000 74%, transparent); mask-image:linear-gradient(transparent, #000 22%, #000 74%, transparent); }
  html:not(.pelicula) .taller .mano { position:relative; }
}

/* 3.6 · costuras en vertical: personajes → ventana y ventana → taller dejan de ser un corte recto. La escena que entra extiende hacia
   arriba un fundido a la madera en penumbra sobre las últimas ~14 svh de la que sale, y empieza desde ese mismo tono. */
@media (orientation:portrait){
  html:not(.pelicula) #ventana::before, html:not(.pelicula) #taller::before {
    content:""; position:absolute; left:0; right:0; top:-14svh; height:14svh; z-index:6; pointer-events:none;
    background:linear-gradient(rgb(20 13 8/0), rgb(20 13 8/.55) 55%, rgb(20 13 8/.94));
  }
  html:not(.pelicula) #ventana .escena::before { content:""; position:absolute; left:0; right:0; top:0; z-index:4; pointer-events:none; height:11svh; background:linear-gradient(rgb(20 13 8/.94), rgb(20 13 8/.5) 45%, rgb(20 13 8/0)); }
  html:not(.pelicula) .taller .escena::after {
    background:linear-gradient(rgb(20 13 8/.94), rgb(10 8 6/.25) 9%, rgb(10 8 6/0) 14%, rgb(10 8 6/0) 64%, rgb(var(--fondo-rgb)/.55) 84%, var(--fondo));
  }
}

/* 3.6b · las mismas costuras en película (escritorio): el fundido de entrada de la ventana y del taller sobre la escena que sale, el
   taller arranca desde la madera en penumbra (no desde una franja azul) y la lámina del taller se funde en el azul del documental
   con un velo que pertenece al bloque siguiente (solo asoma cuando la escena ya se va, no durante su parada). */
html.pelicula #ventana, html.pelicula #taller, html.pelicula .taller-mas { position:relative; }
html.pelicula #ventana::before, html.pelicula #taller::before {
  content:""; position:absolute; left:0; right:0; top:-16svh; height:16svh; z-index:6; pointer-events:none;
  background:linear-gradient(rgb(20 13 8/0), rgb(20 13 8/.55) 55%, rgb(20 13 8/.94));
}
html.pelicula #ventana .escena::before { content:""; position:absolute; left:0; right:0; top:0; z-index:4; pointer-events:none; height:10svh; background:linear-gradient(rgb(20 13 8/.94), rgb(20 13 8/.45) 45%, rgb(20 13 8/0)); }
html.pelicula .taller .escena-banda::before { background:linear-gradient(rgb(20 13 8), rgb(20 13 8/0)); }
html.pelicula .taller-mas::before {
  content:""; position:absolute; left:0; right:0; top:-18svh; height:18svh; z-index:6; pointer-events:none;
  background:linear-gradient(rgb(var(--fondo-rgb)/0), rgb(var(--fondo-rgb)/.6) 50%, var(--fondo));
}
/* bajo la ventana está «Vuelve al atardecer» (a 64 px del borde): el fundido de entrada del taller se queda por debajo de él */
html.pelicula #taller::before { top:-6svh; height:6svh; }

/* 3.8 · una sola voz (L3 · 3.1): tres tamaños de frase en película, en variables comunes, en lugar de siete (46,8–67,3 px a 1440).
   A · portada y cita: el de «Sigue la magia.» (64,8 px a 1440, 73,6 a 1920).
   B · relato del exterior y del taller: 57,6 px a 1440 → 68 a 1920 (hoy se queda en 57,6).
   C · interior y noche: 48 px a 1440 → 54 a 1920.
   El móvil conserva sus tamaños (sus maquetas de lectura y de cierre están calibradas a ellos). */
@media (min-width:1000px){
  /* (revisión) solo en película: el apilado (iPad en vertical, escritorio con movimiento reducido) conserva sus tamaños */
  :root { --voz-a:clamp(2.4rem, 2.4rem + 1.834vw, 4.8rem); --voz-b:clamp(2.4rem, 1.65rem + 2.167vw, 4.6rem); --voz-c:clamp(2rem, 1.875rem + 1.25vw, 3.6rem); }
  html.pelicula .cita p.d { font-size:var(--voz-a) !important; }
  html.pelicula :is(#cima-t, #aldea-t, #claro-t, #taller-t) { font-size:var(--voz-b) !important; }
  html.pelicula :is(#libros-t, #personajes-t, #ventana-t, #noche .noche-frase) { font-size:var(--voz-c) !important; }
  /* 3.3 · el cierre: «Ahora tienes un lugar al que volver.» a 0,62 de la frase de la noche (R13: ≈0,53) */
  html.pelicula #noche .noche-volver { font-size:calc(var(--voz-c) * .62) !important; }
}

/* 3.9 · familias (L3 · 3.2): la lectura pasa de Newsreader a Fraunces (la voz del relato) y el título del documental, de Instrument
   Serif a Fraunces. Instrument Serif queda solo en la marca «Norteña» de la cabecera y del pie [TO CONFIRM: si la marca debe pasar
   también a Fraunces]. Quedan Fraunces, Instrument Sans (interfaz), AstraCaveat (la mano) y la marca; Newsreader deja de descargarse. */
:root { --lectura:"Fraunces",Georgia,serif; }
.documental-titulo, .documental-titulo span { font-family:"Fraunces",Georgia,serif; }

/* 3.10 · «volver», un destello hacia la Ñ [PROPOSAL · D8] (magia-volver.js): el lienzo de sus motas, sobre el cierre y sin puntero */
.magia-volver-lienzo { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:25; }
@media print { .magia-volver-lienzo { display:none; } }