/* profeniro.cl · la partitura de ensayo (desde el 30 oct 2026)
   Una partitura impresa, limpia, con el lápiz naranja del director encima.
   Una sola hoja para el sitio y la guía (web/marca.css es copia exacta).
   Colores de marca: remotion-reels/src/marca.ts; si cambian allá, cambian acá.
   Los nombres de variable (--pizarra, --tiza) se quedan para no tocar cada página:
   --pizarra es el papel índigo, --tiza es la tinta de grabado. */

@font-face{font-family:"Edwin";font-weight:400;font-style:normal;font-display:swap;src:url("/fuentes/edwin-roman.woff2") format("woff2")}
@font-face{font-family:"Edwin";font-weight:400;font-style:italic;font-display:swap;src:url("/fuentes/edwin-italic.woff2") format("woff2")}
@font-face{font-family:"Edwin";font-weight:700;font-style:normal;font-display:swap;src:url("/fuentes/edwin-bold.woff2") format("woff2")}

:root{
  --pizarra:#16123C;          /* el papel */
  --pizarra-honda:#110E31;
  --tiza:#F4F1E8;             /* tinta de grabado */
  --tiza-media:#CDD0E2;
  --tenue:#A9B2D3;
  --celeste:#8FA8D6;          /* pentagrama y números de compás */
  --naranja:#F68D4F;          /* el lápiz del director: solo anota */
  --linea:rgba(143,168,214,.26);
  --pauta:rgba(143,168,214,.72);

  --letra:"Edwin","Century Schoolbook","New Century Schoolbook",Georgia,serif;
  --letra-tiza:var(--letra);  /* títulos */
  --letra-mano:var(--letra);  /* indicaciones: van en cursiva */
  --letra-marca:var(--letra);
  --letra-cuerpo:var(--letra);

  --columna:680px;
  --margen:24px;
  --salida:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--pizarra)}
/* ⚠️ Sin scroll-behavior:smooth: deja muertos los saltos por ancla (probado el 9 sep 2026). */
body{
  margin:0;color:var(--tiza);font-family:var(--letra);
  font-size:18px;line-height:1.58;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;background:var(--pizarra);
  font-variant-numeric:oldstyle-nums;
}
::selection{background:rgba(246,141,79,.34);color:var(--tiza)}
img,svg{display:block}
a{color:inherit;text-decoration-color:var(--celeste);text-underline-offset:.22em;text-decoration-thickness:1px}
:focus-visible{outline:1.5px solid var(--naranja);outline-offset:5px;border-radius:2px}

.columna{max-width:calc(var(--columna) + 2*var(--margen));margin:0 auto;padding:0 var(--margen)}

/* ---------- secciones: sistemas de una misma partitura, separados por una raya fina ---------- */
.pizarra{position:relative;padding:76px 0 72px}
.pizarra + .pizarra{border-top:1px solid var(--linea)}
@media (min-width:800px){.pizarra{padding:96px 0 88px}}

/* ---------- letra ---------- */
h1,h2,h3{font-family:var(--letra);font-weight:400;letter-spacing:-.005em;margin:0;color:var(--tiza);text-wrap:balance}
h1{font-size:clamp(34px,9.2vw,58px);line-height:1.1}
h2{font-size:clamp(29px,7.8vw,42px);line-height:1.12;margin-bottom:18px}
h3{font-weight:700;font-size:18.5px;line-height:1.3}
p{margin:0 0 16px}
.bajada{font-size:clamp(18px,4.7vw,20px);color:var(--tiza-media);max-width:34em}
.tenue{color:var(--tenue)}
/* Las antiguas notas a mano son ahora indicaciones de partitura: cursiva. */
.mano{font-style:italic;font-size:19px;line-height:1.38;color:var(--tiza-media)}
.mano.naranja{color:var(--naranja)}
strong{color:var(--tiza);font-weight:700}
em{font-style:italic}

/* Lápiz bajo una palabra. El SVG va dentro del span; sin JS queda dibujado. */
.subraya{position:relative;display:inline-block;white-space:nowrap}
.subraya > svg{position:absolute;left:-1%;width:102%;bottom:-.12em;height:.26em;overflow:visible;pointer-events:none}
.subraya > svg path,.encierra > svg path{fill:none;stroke:var(--naranja);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.encierra{position:relative;display:inline-block;padding:0 .12em;margin:0 .1em}
.encierra > svg{position:absolute;left:-.32em;top:-.3em;width:calc(100% + .5em);height:calc(100% + .55em);overflow:visible;pointer-events:none}

/* El lápiz anota cuando su sistema entra en pantalla. */
@media (prefers-reduced-motion:no-preference){
  .js .traza path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--salida) .15s}
  .js .vista .traza path,.js .traza.vista path{stroke-dashoffset:0}
}

/* ---------- botones: recuadros de tinta fina ---------- */
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:28px 0 0}
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:12px 26px;text-decoration:none;
  font-family:var(--letra);font-weight:400;font-size:18px;line-height:1.2;letter-spacing:.01em;
  border:1.5px solid var(--tiza);border-radius:2px;
  transition:transform .16s var(--salida),background-color .16s ease,color .16s ease;
}
.boton:active{transform:scale(.97)}
.boton.lleno{background:var(--tiza);color:var(--pizarra)}
.boton.trazo{background:transparent;color:var(--tiza)}
@media (hover:hover) and (pointer:fine){
  .boton.lleno:hover{background:#fff}
  .boton.trazo:hover{background:rgba(244,241,232,.07)}
}
@media (max-width:519px){.acciones .boton{width:100%}}

/* Enlace: subrayado fino, con objetivo táctil calibrado
   (relleno vertical + margen negativo del mismo tamaño, ver CLAUDE.md). */
.enlace{
  color:var(--tiza);font-style:italic;text-decoration:underline;text-decoration-color:var(--linea);
  text-decoration-thickness:1px;text-underline-offset:5px;
  padding:12px 1px;margin:-12px 0;
}
@media (hover:hover){.enlace:hover{text-decoration-color:var(--naranja);text-decoration-thickness:2px}}

/* ---------- cabecera de partitura (no pegajosa: en el teléfono taparía los títulos) ---------- */
.barra{padding:16px 0 0}
.barra .columna{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 18px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--letra);font-size:13px;letter-spacing:.2em;text-transform:uppercase;line-height:1.1;color:var(--tiza);padding:14px 0}
.logo .iman,.iman{display:none}
.barra ul{list-style:none;margin:0;padding:0;display:flex;gap:4px 18px;flex-wrap:wrap}
.barra li a{display:inline-block;padding:11px 3px;text-decoration:none;font-style:italic;font-size:16px;line-height:1.2;color:var(--tenue)}
/* El círculo de la página activa necesita aire para no cortar las letras. */
.barra .encierra{padding:0 .34em;margin:0 -.22em}
.barra li a[aria-current="page"]{color:var(--tiza)}
@media (hover:hover){.barra li a:hover{color:var(--tiza)}}

/* ---------- pie ---------- */
.pie{padding:34px 0 44px;border-top:1px solid var(--linea);background:var(--pizarra-honda);color:var(--tenue);font-size:15px}
.pie ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:0 22px}
.pie li a{display:inline-flex;align-items:center;gap:8px;padding:12px 0;text-decoration:none;color:var(--tiza-media)}
@media (hover:hover){.pie li a:hover{color:var(--tiza)}}
.pie p{margin:0}
.glifo{flex:none}

/* ---------- notación dibujada ---------- */
.ritmo{margin:26px 0 0}
.ritmo.chico{margin:4px 0 22px;transform:scale(.82);transform-origin:left center}
.ritmo .nota{fill:var(--tiza)}
.ritmo .renglon{stroke:var(--celeste);stroke-width:1.2;opacity:.8}
.ritmo .cifra-r{font-family:var(--letra);font-weight:700;font-size:17px;fill:var(--tiza);font-variant-numeric:lining-nums}
.ritmo .barra-r{stroke:var(--tiza);stroke-width:1.5}

/* ---------- retrato: una foto derecha con filete fino ---------- */
.retrato{position:relative;flex:none}
.retrato img{object-fit:cover;object-position:50% 40%;border:1px solid var(--linea)}

@media (prefers-reduced-motion:reduce){.boton:active{transform:none}}

/* ---------- láminas (portadas de Instagram) ---------- */
/* En el teléfono, una lámina legible y la siguiente asomando; en escritorio,
   las tres salen de la columna para medir unos 300 px. */
.laminas{list-style:none;padding:0 var(--margen);margin:8px calc(-1 * var(--margen)) 0;display:flex;gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--margen);overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.laminas::-webkit-scrollbar{display:none}
.laminas li{flex:0 0 78%;scroll-snap-align:start}
.laminas a{display:block;text-decoration:none}
.laminas img{width:100%;height:auto;border:1px solid var(--linea)}
.laminas span{display:block;margin-top:10px;font-style:italic;font-size:16px;line-height:1.35;color:var(--tiza-media)}
@media (min-width:760px){
  .laminas{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;overflow:visible;padding:0;
    width:min(980px,calc(100vw - 2 * var(--margen)));margin:8px 0 0;position:relative;left:50%;translate:-50% 0}
}

/* ---------- partitura dibujada (inicio y taller) ---------- */
.melodia,.sistema{width:100%;height:auto;overflow:visible}
.melodia .linea{fill:none;stroke:var(--pauta);stroke-width:1.1}
.melodia .n{fill:var(--tiza)}
.melodia .blanca{fill:none;stroke:var(--tiza);stroke-width:2.2}
.melodia .adicional,.melodia .barra-compas{stroke:var(--tiza);stroke-width:1.4;fill:none}
.melodia .barra-final{stroke:var(--tiza);stroke-width:4.5}
.melodia .corchete{fill:none;stroke:var(--tiza);stroke-width:2.1;stroke-linecap:round}
.melodia .cifra text{font-family:var(--letra);font-weight:700;font-size:26px;fill:var(--tiza);text-anchor:middle}

/* =====================================================================
   MOVIMIENTO
   Una sola gramática para todas las páginas:
   · lo que entra en pantalla aparece subiendo 10 px, en fila, 55 ms entre uno y otro;
   · el lápiz naranja anota (subraya, encierra) cuando el texto ya está;
   · las notas dibujadas aparecen al pulso de su propio ritmo.
   Todo depende de la clase .js (la pone el <head> y se quita sola si
   pizarra.js no llega) y de .vista (la pone pizarra.js al entrar en
   pantalla). Sin JavaScript, todo está visible desde el principio.
   ===================================================================== */
:root{interpolate-size:allow-keywords}

@media (prefers-reduced-motion:no-preference){
  /* Títulos: la tinta ya está impresa; solo aparecen. */
  .js .pizarra h1,.js .pizarra > .columna > h2{opacity:0;transform:translateY(8px);transition:opacity .45s var(--salida),transform .45s var(--salida)}
  .js .vista h1,.js .vista > .columna > h2{opacity:1;transform:none}
  .js .vista h1 .traza path,.js .vista > .columna > h2 .traza path{transition-delay:.45s}

  /* Lo demás: sube 10 px y aparece, en fila. */
  .js .pizarra > .columna > :not(h2):not(.laminas){
    opacity:0;transform:translateY(10px);
    transition:opacity .3s var(--salida),transform .3s var(--salida);
    transition-delay:calc(var(--i,1) * 55ms + 120ms)}
  .js .vista > .columna > :not(h2):not(.laminas){opacity:1;transform:none}

  /* Las láminas, una tras otra. */
  .js .laminas li{opacity:0;transform:translateY(12px);transition:opacity .35s var(--salida),transform .35s var(--salida)}
  .js .vista .laminas li{opacity:1;transform:none}
  .js .vista .laminas li:nth-child(2){transition-delay:.06s}
  .js .vista .laminas li:nth-child(3){transition-delay:.12s}

  /* El ritmo suena: cada nota aparece en su tiempo (negra = 500 ms). */
  .js .ritmo .n{opacity:0;transform:translateY(-5px);
    transition:opacity .18s var(--salida),transform .18s var(--salida);transition-delay:calc(var(--t) * 1ms + .4s)}
  .js .vista .ritmo .n{opacity:1;transform:none}

  /* Las preguntas se despliegan (donde el navegador lo permite). */
  .preguntas details::details-content{block-size:0;overflow-y:clip;opacity:0;
    transition:block-size .22s var(--salida),opacity .22s var(--salida),content-visibility .22s allow-discrete}
  .preguntas details[open]::details-content{block-size:auto;opacity:1}

  /* Entre páginas, un fundido corto. */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:var(--salida)}
}

/* Movimiento reducido: menos y más suave, no cero. Se queda el fundido,
   se va el desplazamiento; las notas y trazos ya aparecen dibujados. */
@media (prefers-reduced-motion:reduce){
  .js .pizarra > .columna > *,.js .laminas li{opacity:0;transition:opacity .2s ease}
  .js .vista > .columna > *,.js .vista .laminas li{opacity:1}
}

/* =====================================================================
   INICIO: la partitura de ensayo
   ===================================================================== */
.cabecera-partitura{
  max-width:calc(var(--columna) + 2*var(--margen));margin:0 auto;padding:22px var(--margen) 0;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
}
.cabecera-partitura .logo{padding:13px 1px;margin:-13px 0}
.cabecera-partitura .autor{font-style:italic;font-size:14px;color:var(--tenue);text-align:right}

.portada-inicio{max-width:calc(var(--columna) + 2*var(--margen));margin:0 auto;padding:12px var(--margen) 64px}
.portada-inicio .titulo{text-align:center}
.portada-inicio h1{margin:0 auto;max-width:15ch;font-size:clamp(33px,8.9vw,58px)}
.dedicatoria{margin:10px 0 0;font-style:italic;font-size:clamp(16px,4.3vw,19px);color:var(--tiza-media)}

.lapiz-sub{position:relative;display:inline-block;white-space:nowrap}
.lapiz-sub svg{position:absolute;left:-1%;width:102%;bottom:-.1em;height:.26em;overflow:visible;pointer-events:none}
.lapiz-sub path{fill:none;stroke:var(--naranja);stroke-width:2.4;stroke-linecap:round}

.partitura-inicio{margin:26px 0 0;position:relative}
.sistema.ancho{display:none}
@media (min-width:600px){.sistema.ancho{display:block}.sistema.angosto{display:none}}
.sistema .pauta line{stroke:var(--pauta);stroke-width:1}
.sistema .barra{stroke:var(--tiza);stroke-width:1.3}
.sistema .final{fill:var(--tiza)}
.sistema .n ellipse,.sistema .n rect,.sistema .n circle{fill:var(--tiza)}
.sistema .n ellipse.hueca{fill:none;stroke:var(--tiza);stroke-width:1.9}
.sistema .corchete{fill:none;stroke:var(--tiza);stroke-width:1.7;stroke-linecap:round}
.sistema .cifra{font-family:var(--letra);font-weight:700;font-size:21px;fill:var(--tiza);text-anchor:middle;font-variant-numeric:lining-nums}
.sistema .compas{font-family:var(--letra);font-style:italic;font-size:12px;fill:var(--celeste);font-variant-numeric:lining-nums}
.sistema .tempo{font-family:var(--letra);font-weight:700;font-size:15px;fill:var(--tiza)}
.sistema .dinamica{font-family:var(--letra);font-style:italic;font-weight:700;font-size:19px;fill:var(--naranja);transform:rotate(-5deg);transform-box:fill-box;transform-origin:center}
.sistema .lapiz path{fill:none;stroke:var(--naranja);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.partitura-inicio figcaption{position:absolute;top:0;right:0;font-style:italic;font-size:15px;line-height:1.2;color:var(--tenue);text-align:right}
.partitura-inicio summary{cursor:pointer;list-style:none;display:inline-block;padding:11px 1px;margin:-11px 0;text-decoration:underline;text-decoration-color:var(--linea);text-underline-offset:.24em}
.partitura-inicio summary::-webkit-details-marker{display:none}
.partitura-inicio details[open] summary{display:none}
.partitura-inicio details span{color:var(--tiza-media)}

/* El lápiz anota una vez al cargar. Por defecto todo está puesto. */
.anota .sistema .lapiz path,.anota .lapiz-sub path{stroke-dasharray:1;stroke-dashoffset:1}
.anota .sistema .dinamica{opacity:0}
.anotado .sistema .lapiz path,.anotado .lapiz-sub path{stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--salida)}
.anotado .lapiz-sub path{transition-delay:.15s}
.anotado .sistema .lapiz path{transition-delay:calc(.75s + var(--d)*.45s)}
.anotado .sistema .dinamica{opacity:1;transition:opacity .5s ease-out 1.8s}

/* Las tres puertas, como movimientos de una obra. */
.movimientos{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--linea)}
.movimientos li{border-bottom:1px solid var(--linea)}
.movimientos a{display:grid;grid-template-columns:clamp(48px,13vw,62px) 1fr 28px;align-items:start;gap:6px;padding:13px 0 14px;text-decoration:none;min-height:56px}
.movimientos .num{font-size:clamp(26px,7vw,32px);color:var(--celeste);line-height:1.08;font-variant-numeric:lining-nums}
.movimientos .nombre{display:block;font-size:clamp(26px,7vw,32px);line-height:1.08;margin:0;font-weight:400}
.movimientos .indicacion{display:block;margin-top:4px;font-style:italic;font-size:15.5px;line-height:1.36;color:var(--tiza-media)}
.movimientos .flecha{width:24px;height:12px;justify-self:end;margin-top:.7em;transition:transform .35s var(--salida)}
.movimientos .flecha path{fill:none;stroke:var(--tiza);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){
  .movimientos a:hover .nombre{text-decoration:underline;text-decoration-color:var(--naranja);text-decoration-thickness:2px;text-underline-offset:.18em}
  .movimientos a:hover .flecha{transform:translateX(4px)}
}

/* La firma: se escribe una vez al llegar a la pantalla, trazo a trazo. */
.firma-niro{display:flex;align-items:flex-end;gap:14px;justify-content:flex-end;margin-top:30px;text-align:right}
.firma-niro img{order:2;width:48px;height:60px;object-fit:cover;border:1px solid var(--linea)}
.firma-trazo{width:200px;height:auto;margin:0 -6px 6px auto;overflow:visible}
.firma-trazo g path{fill:none;stroke:var(--tiza);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round}
.firma-trazo g path.rubrica{stroke-width:3.4}
.firma-niro p{margin:0;font-style:italic;font-size:13.5px;line-height:1.35;color:var(--tenue)}
.espera .firma-trazo path{stroke-dasharray:1;stroke-dashoffset:1}
.firmada .firma-trazo path{stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.45,0,.2,1)}
.firmada .firma-trazo path[style*="--d:0"]{transition-duration:.55s}
.firmada .firma-trazo path[style*="--d:1"]{transition-duration:.8s;transition-delay:.6s}
.firmada .firma-trazo path[style*="--d:2"]{transition-duration:.1s;transition-delay:1.45s}
.firmada .firma-trazo path[style*="--d:3"]{transition-duration:1.1s;transition-delay:1.7s;transition-timing-function:cubic-bezier(.3,0,.3,1)}

@media (min-width:860px){
  .portada-inicio{padding-top:44px}
  .partitura-inicio{margin-top:36px}
  .movimientos{margin-top:34px}
}