/* ==========================================================================
   BALDUQUE · un expediente que se lee: papel, tinta, y una sola cinta roja.
   Gramática: capítulos editoriales. Cortes secos entre capítulos, nada de fundidos.
   Tokens en :root. El acento (--balduque) vive en una línea.
   Movimiento: lento y deliberado. Solo transform/translate/scale, opacity,
   clip-path y stroke-dashoffset. Todo lo que se esconde para entrar se esconde
   bajo .js y sin movimiento reducido: sin JS o con reducido, todo está a la vista.
   ========================================================================== */
@font-face { font-family: "Newsreader"; src: url(../fuentes/newsreader.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(../fuentes/newsreader-italic.woff2) format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(../fuentes/schibsted-grotesk.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  --papel: #F3F2EE;
  --papel-2: #E8E6E0;
  --tinta: #17171B;
  --tinta-2: #57544E;
  --balduque: #A5282C;
  --balduque-reves: #74191C;   /* el revés de la cinta, cuando se da la vuelta */
  --linea: rgb(23 23 27 / .16);

  --f-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-sans: "Schibsted Grotesk", system-ui, sans-serif;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --telon: cubic-bezier(0.77, 0, 0.18, 1);       /* cortinas, carpetas y cabeceras */
  --pluma: cubic-bezier(0.19, 1, 0.22, 1);       /* líneas de texto que suben: arranca decidida y se posa despacio */
  --d-rapido: 150ms;
  --d-base: 240ms;

  --folio: 3rem;
  --arriba: 2.75rem;                        /* aire sobre la portada: el lazo cuelga en él */
  --cinta-x: clamp(2.5rem, 5.2vw, 5.25rem); /* dónde corre la cinta (el lazo cabe entero a su izquierda) */
  --margen: clamp(4.5rem, 12vw, 12rem);     /* columna de margen: numerales y párrafos */
  --lado: clamp(1.25rem, 6vw, 5rem);        /* margen derecho */
  --medida: 38rem;                          /* ~66 caracteres en el cuerpo */
  /* el lazo cabe entero a la izquierda de la cinta: en la tablet (cinta a 40-62 px del borde) uno de 7,5 rem se salía
     de la pantalla; se encoge con el margen y en escritorio sigue a 7,5 rem */
  --lazo-w: min(7.5rem, calc(2 * var(--cinta-x) - 4px));
}

/* [hidden] manda siempre: un display de clase no puede resucitar lo que el HTML esconde */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 2rem; scroll-padding-bottom: var(--folio); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--f-serif); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.6;
  font-optical-sizing: auto; font-kerning: normal; font-variant-ligatures: common-ligatures;
  padding-bottom: var(--folio);
  position: relative;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--balduque); color: var(--papel); }
:focus-visible { outline: 2px solid var(--balduque); outline-offset: 3px; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--tinta); color: var(--papel); padding: .75rem 1rem; font-family: var(--f-sans); }
.saltar:focus { top: 1rem; }
.versalita { font-variant-caps: all-small-caps; letter-spacing: .06em; font-feature-settings: "smcp", "c2sc"; }
cite { font-style: italic; }

/* Lenis (sus reglas recomendadas): mientras hay inercia, nada de scroll-behavior nativo */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ------------------------------------------------------------ la cinta y los lazos */
.balduque { position: absolute; left: 0; top: 0; width: calc(var(--cinta-x) * 2 + 20px); height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.balduque__cinta path { stroke: none; }
.balduque .cara { fill: var(--balduque); }
.balduque .reves { fill: var(--balduque-reves); }

.lazo { position: absolute; width: 7.5rem; height: auto; overflow: visible; pointer-events: none; }
.lazo path { fill: none; stroke: var(--balduque); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: var(--lazo, 0); }
.lazo .lazo__cabo { stroke-dashoffset: var(--cabo, 0); }
.lazo__nudo { fill: var(--balduque-reves); transform-box: fill-box; transform-origin: center; transform: scale(var(--nudo, 1)); }
.lazo--portada { width: var(--lazo-w); left: calc(var(--cinta-x) + 3px - var(--lazo-w) / 2); top: 2.2rem; z-index: 4; }

/* la apertura: la cinta rodea la pantalla y se retira hacia el nudo (la crea el JS; con reducido no existe) */
.apertura { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.apertura path { fill: none; stroke: var(--balduque); stroke-width: 9; stroke-linejoin: miter; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* la atadura del legajo (capítulo III): la rama que va del margen al nudo de la foto; el JS pone geometría y avance.
   Sin lazo dibujado: el nudo lo pone la foto. La rama se revela con su eje (máscara) y se funde en el nudo. */
.atadura { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.atadura__rama { fill: var(--balduque); }
.atadura__eje { fill: none; stroke: #fff; stroke-width: 48; stroke-linecap: butt; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* el cosido del capítulo II: el cordón entra y sale del margen por un agujero junto a cada cláusula */
/* caja de 1 px que dibuja fuera de sí (overflow visible): al fijarse la sección, un SVG del tamaño del capítulo cuenta como
   un salto de maquetación enorme (CLS 0,73 medido); uno de 1 px, nada */
.cosido { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; z-index: 3; overflow: visible; }
.cosido__cordon { fill: none; stroke: #fff; stroke-width: 24; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }  /* la máscara que revela el cosido */
.cosido__frente { fill: none; stroke: var(--balduque); stroke-width: 5; stroke-linecap: round; filter: url(#grano); }
.cosido__detras { fill: none; stroke: var(--balduque-reves); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 5; opacity: .45; }  /* la vuelta, por detrás de la hoja */
#cap-2.cosido-fijo .nota--margen { position: static; }
.cosido__agujeros circle { fill: var(--tinta); opacity: .5; }
.cosido__nudo { transform-box: fill-box; transform-origin: 50% 0; transform: scale(0); transition: transform 450ms var(--ease); }
.cosido__nudo path { fill: none; stroke: var(--balduque); stroke-width: 4; stroke-linecap: round; }
.cosido__nudo rect { fill: var(--balduque-reves); }
.cosido__nudo.es-atado { transform: none; }
/* la cinta del margen con el mismo grano de hebra que la de la foto */
.balduque__cinta { filter: url(#grano); }

/* ------------------------------------------------------------ logotipo: la cola de la q es un cabo de balduque
   Newsreader recta, peso 300, opsz 72, interlínea .84 (portada, colofón y folio usan esa misma receta): la línea de base
   cae a .653 em de lo alto de la caja de la letra y el asta ocupa de .4267 a .4852 em (medido en los contornos de la
   fuente). El ojo se corta .012 em bajo la base (conserva el remate inferior del ojo) y en su lugar cuelga una cinta
   del ancho exacto del asta, de .34 em, con cola de milano. Sin JS es igual: todo es HTML y CSS.
   Donde la palabra se lee tal cual (folio, colofón, portada sin JS) nada puede ser una caja aparte: Chrome partiría el
   nombre accesible («Baldu q ue», «Balduq ue»; test LQ3). Ahí los spans van en línea y la cinta es su fondo. La caja
   de un span en línea es el área de contenido de la fuente (.735 em sobre la base, .265 bajo ella) y su relleno
   inferior no mueve la línea: solo agranda la zona donde se pinta el fondo. */
.q__ojo { clip-path: inset(-.5em -.5em .253em -.5em); }
.letra--q:not(.letra) {
  padding-bottom: .1em;
  background:
    linear-gradient(to bottom right, var(--balduque) 50%, transparent 50%) .4267em 1.013em / .02925em .05em no-repeat,
    linear-gradient(to bottom left, var(--balduque) 50%, transparent 50%) .45595em 1.013em / .02925em .05em no-repeat,
    linear-gradient(var(--balduque) 0 0) .4267em .723em / .0585em .29em no-repeat;
}
/* la q troceada de la portada (inline-block, para moverla; aria-hidden, la lee el .sr): su base cae a .653 em y la
   cinta es un ::after, para que caiga cuando la letra ya se ha posado */
.letra.letra--q { position: relative; }
.letra.letra--q::after {
  content: ""; position: absolute; left: .4267em; top: .65em; width: .0585em; height: .34em; pointer-events: none;
  background: var(--balduque); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - .05em), 0 100%); transform-origin: 50% 0;
}
/* colores forzados: la cinta desaparece y la q vuelve a ser q entera */
@media (forced-colors: active) { .q__ojo { clip-path: none; } .letra--q:not(.letra) { background: none; } .letra.letra--q::after { display: none; } }

/* ------------------------------------------------------------ portada */
/* el aire de arriba va en el relleno de main (un margen en la portada se sumaría al de body, que es el que posiciona la cinta) */
main { padding-top: var(--arriba); }
.portada {
  position: relative; min-height: calc(100vh - var(--folio) - var(--arriba)); min-height: calc(100svh - var(--folio) - var(--arriba));
  display: grid; align-content: center; padding: 4.25rem var(--lado) 4rem var(--margen);
}
.portada__membrete { margin: 0 0 1rem; font-family: var(--f-sans); font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); }
.portada__marca {
  margin: 0; font-weight: 300; font-size: clamp(4.2rem, 11.2vw, 11.5rem); line-height: .84; letter-spacing: -.035em;
  font-variation-settings: "opsz" 72;
}
/* por debajo de ~340 px el mínimo de 4.2rem no cabe (la palabra mide 3,82 em) y partía «Balduqu / e» */
@media (max-width: 360px) { .portada__marca { font-size: min(4.2rem, calc((100vw - 5rem) / 3.95)); } }
.portada__definicion { position: relative; max-width: 34rem; margin: 1.75rem 0 2.75rem; font-size: 1.0625rem; line-height: 1.55; color: var(--tinta-2); padding-left: 1.1rem; }
.portada__definicion::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--linea); transform-origin: 50% 0; }
.portada__definicion .versalita { color: var(--tinta); font-weight: 600; font-size: 1.15em; }
.portada__fuente { display: block; margin-top: .4rem; font-size: .875rem; }
.portada__titulo { margin: 0; max-width: 16ch; font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.portada__entrada { max-width: var(--medida); margin: 1.75rem 0 0; font-size: 1.1875rem; }
.portada__accion { margin: 2rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; }
.portada__o { font-style: italic; color: var(--tinta-2); }
.enlace-texto {
  font-family: var(--f-sans); font-weight: 600; font-size: 1rem; letter-spacing: .02em; text-decoration: none; color: var(--balduque);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: .15rem;
  transition: background-size var(--d-base) var(--ease);
}
.enlace-texto::after { content: "\00a0\2192"; display: inline-block; transition: transform var(--d-base) var(--ease); }
.enlace-texto:hover::after { transform: translateX(.3rem); }
.enlace-texto:hover { background-size: 100% 3px; }

@media (min-width: 1000px) and (min-height: 821px) {
  .portada { min-height: calc(100svh - var(--folio) - var(--arriba) - 8rem); }
}
@media (min-width: 1000px) and (max-height: 820px) {
  .portada { min-height: calc(100svh - var(--folio) - var(--arriba)); padding-top: 2.25rem; padding-bottom: 2rem; }
  .portada__marca { font-size: min(11.2vw, 20vh); }
  .portada__titulo { font-size: min(4.6vw, 8.4vh); }
}
/* portada a dos columnas en pantalla ancha: la definición hace de nota al margen derecho */
@media (min-width: 1000px) {
  .portada { grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 1fr); column-gap: clamp(2rem, 5vw, 6rem); align-content: center; }
  .portada__membrete { grid-column: 1 / -1; }
  .portada__marca { grid-column: 1; grid-row: 2; }
  .portada__definicion { grid-column: 2; grid-row: 2; align-self: end; margin: 0 0 1.2rem; }
  .portada__titulo { grid-column: 1; grid-row: 3; margin-top: clamp(1.5rem, 5vh, 3rem); }
  .portada__entrada { grid-column: 2; grid-row: 3; align-self: start; margin: 3.6rem 0 0; }
  .portada__accion { grid-column: 2; grid-row: 4; align-self: start; }
}

/* ------------------------------------------------------------ capítulos */
.capitulo { position: relative; padding: clamp(5rem, 10vw, 9rem) var(--lado) clamp(4rem, 8vw, 7rem) var(--margen); }
.capitulo__cabeza { position: relative; display: flex; align-items: baseline; gap: 1.5rem; margin: 0 0 3rem calc(var(--margen) * -1 + var(--cinta-x) + 1.75rem); padding-bottom: 1.25rem; }
/* regla roja bajo cada cabecera de capítulo, que se traza al entrar */
.capitulo__cabeza::after { content: ""; position: absolute; left: calc(var(--margen) - var(--cinta-x) - 1.75rem); right: 0; bottom: 0; height: 1px; background: var(--balduque); transform-origin: 0 50%; }
.capitulo__num { margin: 0; min-width: calc(var(--margen) - var(--cinta-x) - 3.25rem); font-style: italic; font-weight: 300; font-size: clamp(3.5rem, 8vw, 7.5rem); line-height: .8; letter-spacing: -.02em; color: var(--balduque); text-align: right; font-variation-settings: "opsz" 72; }
.capitulo__titulo { margin: 0; font-weight: 400; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.6rem); line-height: 1; letter-spacing: -.02em; }
.capitulo__entrada { max-width: var(--medida); margin: 0 0 2.5rem; font-size: 1.3125rem; line-height: 1.5; }

.materias { list-style: none; margin: 0; padding: 0; }
.materias li { position: relative; display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: .5rem 2.5rem; padding: 1.6rem 0; }
.materias li:last-child { border-bottom: 1px solid var(--linea); }
.materias__par { white-space: nowrap; position: absolute; left: calc(var(--margen) * -1 + var(--cinta-x) + 1.75rem); top: 1.9rem; width: calc(var(--margen) - var(--cinta-x) - 3.25rem); text-align: right; font-family: var(--f-sans); font-size: .8125rem; letter-spacing: .08em; color: var(--tinta-2); }
.materias h3 { margin: 0; font-weight: 500; font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); line-height: 1.15; letter-spacing: -.01em; }
.materias p { margin: 0; max-width: var(--medida); }
/* materias: la fila se abre al pasar por encima */
.materias li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--balduque); transform: scaleX(0); transform-origin: 0 50%; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
/* (sin ratón, .es-senalada hace de :hover: la pone el JS en la fila que cruza la línea de lectura o que se toca) */
.materias li:hover::after, .materias li.es-senalada::after { transform: none; }
.materias li h3 { transition: translate 500ms cubic-bezier(0.16, 1, 0.3, 1), color 300ms var(--ease); }
.materias li:hover h3, .materias li.es-senalada h3 { translate: .5rem 0; color: var(--balduque); }

.clausulas { max-width: var(--medida); }
.clausula { margin: 0 0 1.5rem; font-size: 1.3125rem; line-height: 1.55; text-indent: 0; }
.clausula__ord { font-variant-caps: all-small-caps; letter-spacing: .08em; font-weight: 600; color: var(--balduque); margin-right: .35rem; }
/* el filete de la nota llega al borde de su columna; su texto guarda la medida de lectura */
.nota { margin: 2rem 0 0; padding-top: 1rem; padding-right: max(0px, calc(100% - var(--medida))); border-top: 1px solid var(--linea); font-size: .9375rem; line-height: 1.5; color: var(--tinta-2); }
sup { font-size: .65em; line-height: 0; }
sup a, .nota a { color: var(--balduque); text-decoration: none; font-family: var(--f-sans); font-weight: 600; }

/* capítulo en tinta: el corte duro de la página */
.capitulo--tinta { background: var(--tinta); color: var(--papel); --tinta-2: #B9B5AC; --linea: rgb(243 242 238 / .18); }
.capitulo--tinta .capitulo__num { color: #D98A8C; }
.confidencial { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.confidencial__texto p { max-width: var(--medida); margin: 0 0 1.5rem; font-size: 1.1875rem; }
/* la ficha va por encima de la atadura: la cinta pasa por detrás del expediente y no toca ninguna línea */
.expediente { position: relative; z-index: 4; margin: 2rem 0 2.25rem; padding: 1.75rem 2rem; background: var(--papel); color: var(--tinta); border-left: 3px solid var(--balduque); box-shadow: 0 20px 40px -24px rgb(0 0 0 / .6); font-family: var(--f-sans); font-size: 1rem; line-height: 2.1; }
.expediente p { margin: 0 !important; font-size: 1rem !important; }
/* la longitud de cada tachadura (en caracteres) va en su clase y no en style="": la CSP no admite style-src-attr */
.tachado--11 { --ch: 11; } .tachado--15 { --ch: 15; } .tachado--17 { --ch: 17; } .tachado--19 { --ch: 19; } .tachado--22 { --ch: 22; }
.tachado { display: inline-block; vertical-align: -.22em; width: calc(var(--ch) * .58em); max-width: 100%; height: 1.2em; background: var(--tinta); transform-origin: 0 50%; }
.capitulo--tinta .lamina figcaption { color: #B9B5AC; }

/* IV: los socios apilados, como la cabecera de un escrito: el nombre grande y, a su derecha, el área en versal y
   su voz. La fila se abre con su regla; al pasar, el nombre se subraya en rojo */
.socios { list-style: none; margin: 0; padding: 0; }
.socios li { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: end; padding: 1.4rem 0 1.6rem; --regla: var(--linea); }
.socios li:last-child { border-bottom: 1px solid var(--linea); }
.socios__nombre { margin: 0; font-weight: 300; font-size: clamp(2.6rem, 1.6rem + 3.4vw, 5rem); line-height: .95; letter-spacing: -.03em; font-variation-settings: "opsz" 72; }
.socios__ficha { padding-bottom: .35rem; }
.socios__area { margin: 0 0 .45rem; font-family: var(--f-sans); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--balduque); }
.socios__voz { margin: 0; max-width: 26rem; font-style: italic; font-size: 1.125rem; line-height: 1.45; color: var(--tinta-2); }
.socios__nombre { background: linear-gradient(var(--balduque), var(--balduque)) 0 96% / 0 2px no-repeat; transition: background-size 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.socios li:hover .socios__nombre, .socios li.es-senalada .socios__nombre { background-size: 100% 2px; }

.capitulo--partido { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(15rem, .7fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.capitulo--partido .capitulo__cabeza { grid-column: 1 / -1; }
.tarifa { margin: 0; }
.tarifa div { display: flex; align-items: baseline; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--linea); }
.tarifa dt { display: flex; flex: 1; align-items: baseline; gap: .75rem; }
.tarifa dt::after { content: ""; flex: 1; min-width: 1.5rem; border-bottom: 1.5px dotted rgb(23 23 27 / .38); transform: translateY(-.3em); transform-origin: 0 50%; }
.tarifa dd { margin: 0; font-family: var(--f-sans); font-weight: 600; font-size: .9375rem; font-variant-numeric: lining-nums; white-space: nowrap; } /* sin tabular-nums: da al punto de millar ancho de cifra («1 . 200») */
.importe { display: inline-block; text-align: right; }
/* al pasar (o con el foco dentro), la fila se subraya con cinta: una banda con su cola de milano que se tiende de izquierda a derecha */
.tarifa div { position: relative; }
.tarifa div::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 7px; background: var(--balduque); clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%); transform: scaleX(0); transform-origin: 0 50%; transition: transform 650ms var(--telon); pointer-events: none; }
.tarifa div:hover::after, .tarifa div:focus-within::after, .tarifa div.es-senalada::after { transform: none; }

/* ------------------------------------------------------------ las láminas */
.lamina { margin: 0; }
.lamina.sin-foto { display: none; } /* la foto no ha llegado: la lámina se retira entera */
.lamina__marco { position: relative; overflow: hidden; overflow: clip; }   /* clip: recorta sin ser contenedor de scroll (el distintivo se pega) */
/* la hoja recorta la foto que deriva (overflow) y es la que se abre (clip-path); sin su overflow, Chrome deja de contar la foto
   como el mayor pintado (LCP) y el LCP pasa a la definición de la portada, 1,3 s después (medido) */
.lamina__hoja { position: relative; overflow: hidden; }
.lamina__img { display: block; width: 100%; height: auto; }
/* micro-marca de IA (contrato común de las tres webs, B): «Generada con IA» en la voz del rótulo de lámina (versal de la
   grotesca), en una pestaña de papel en la esquina de arriba a la derecha del marco, fuera de la hoja que se abre y de la
   foto que deriva (la cinta del margen y la rama del legajo entran por la izquierda). Si la parte de arriba de la foto ya
   ha salido de la pantalla, baja pegada al borde (sticky): se ve se llegue por donde se llegue. Alto 0: no mueve la
   maquetación. Con JS entra con la carpeta y se va a los 1,8 s (queda para el lector, con opacidad 0; ver MOVIMIENTO);
   sin JS se queda, como el distintivo de antes. */
.lamina__ia { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; align-items: flex-start; height: 0; margin: 0; pointer-events: none; }
.lamina__ia span, .vista__ia span {
  display: block; padding: .2rem .45rem .22rem; background: var(--papel); color: var(--tinta);
  font-family: var(--f-sans); font-size: .75rem; font-weight: 600; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.capitulo--tinta .lamina__ia span { background: var(--tinta); color: var(--papel); }
.js .lamina__ia, .js .vista__ia { opacity: 0; }

/* ------------------------------------------------------------ el aviso de IA (contrato común de las tres webs, A)
   El rótulo del legajo: una nota en la cabecera, a la altura de la columna de texto y a la derecha del lazo, con un cabo de
   balduque con cola de milano por llamada. Cursiva de la serifa sobre papel, sin caja ni sombra (el papel solo tapa lo que
   pase por debajo si se baja mientras está). Sin JS es una nota más, arriba y en el flujo: no tapa nada y se queda. Con JS
   flota arriba, aparece al acabar la apertura y se desvanece a los 7 s (lo cuenta el JS): retirada queda con opacidad 0,
   para el lector de pantalla (nunca display, visibility ni aria-hidden). No intercepta clics. */
.aviso-ia { max-width: 27rem; margin: 0 var(--lado) 0 var(--margen); padding: 0 .6rem .45rem 0; background: var(--papel); color: var(--tinta); font-style: italic; font-size: .9375rem; line-height: 1.45; }
.aviso-ia::before { content: ""; display: block; width: 2.5rem; height: 5px; margin: 0 0 .4rem; background: var(--balduque); clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%); }
.js .aviso-ia { position: fixed; z-index: 25; top: max(.875rem, env(safe-area-inset-top)); left: var(--margen); width: calc(100% - var(--margen) - var(--lado)); margin: 0; pointer-events: none; opacity: 0; }
.js .aviso-ia.es-visible { opacity: 1; }
.js .aviso-ia.es-retirado { opacity: 0; }
.lamina figcaption { margin-top: .9rem; max-width: 36rem; font-size: .9375rem; line-height: 1.45; color: var(--tinta-2); }
.lamina__num { margin-right: .45rem; font-family: var(--f-sans); font-size: .6875rem; font-style: normal; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--balduque); white-space: nowrap; }
.capitulo--tinta .lamina__num { color: #D98A8C; }

/* 1 · frontispicio: el gesto de la marca, a la derecha, con su pie al margen */
.lamina--frontis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem) minmax(0, .22fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: end; padding: clamp(1rem, 4vw, 3rem) var(--lado) 0 var(--margen); }
.lamina--frontis .lamina__marco { grid-column: 2; grid-row: 1; }
.lamina--frontis figcaption { grid-column: 1; grid-row: 1; justify-self: end; max-width: 19rem; margin: 0 0 .2rem; text-align: right; font-style: italic; }
/* 2 · ancha */
.lamina--ancha { padding: 0 var(--lado) 0 var(--margen); }
/* 4 · a sangre, al pie del capítulo en tinta */
.lamina--sangre { margin: clamp(4rem, 9vw, 8rem) calc(var(--lado) * -1) 0 calc(var(--margen) * -1); }
.lamina--sangre .lamina__marco { aspect-ratio: 21 / 9; }
.lamina--sangre .lamina__hoja, .lamina--sangre .lamina__img { height: 100%; }
.lamina--sangre .lamina__img { object-fit: cover; }
.lamina--sangre figcaption { padding: 0 var(--lado) 0 var(--margen); }

/* ------------------------------------------------------------ la consulta (la hoja) */
.consulta { padding-bottom: clamp(5rem, 9vw, 8rem); }
.hoja { position: relative; max-width: 44rem; padding: 1.5rem 0 0; border-top: 1px solid var(--tinta); }
/* el aviso M-1 y la verdad de la confirmación, con la misma voz: la regla roja del balduque sobre papel */
.hoja__demo, .hoja__verdad { position: relative; margin: 0 0 1.5rem; padding: .7rem .9rem; border-left: 3px solid var(--balduque); background: var(--papel-2); font-family: var(--f-sans); font-size: .875rem; line-height: 1.5; }
.hoja__verdad { margin: 1.5rem 0 0; }
.hoja__sinjs { margin: -.5rem 0 1.25rem; font-family: var(--f-sans); font-size: .875rem; font-weight: 600; color: var(--balduque); }
.hoja__paso { margin: 0 0 .6rem; font-family: var(--f-sans); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.hoja__avance { height: 3px; background: var(--papel-2); margin-bottom: 2rem; overflow: hidden; }
.hoja__avance span { display: block; height: 100%; background: var(--balduque); transform-origin: 0 50%; transform: scaleX(.3333); transition: transform 500ms var(--ease); }
.hoja__bloque { border: 0; padding: 0; margin: 0; }
.hoja__bloque legend { padding: 0; margin: 0 0 1.25rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -.01em; }
/* las cinco materias, en lista: las mismas del capítulo I y con su mismo «§» */
.opciones { display: grid; grid-template-columns: minmax(0, 1fr); counter-reset: materia; border-top: 1px solid var(--linea); }
.opciones label {
  display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; min-height: 3.25rem; padding: .55rem 0; cursor: pointer;
  border-bottom: 1px solid var(--linea); font-size: 1.25rem; line-height: 1.2; transition: color var(--d-rapido) var(--ease);
}
.opciones label::after { counter-increment: materia; content: "§ " counter(materia); font-family: var(--f-sans); font-size: .8125rem; letter-spacing: .08em; color: var(--tinta-2); }
.opciones label:hover, .opciones label:has(input:checked) { color: var(--balduque); }
.opciones input { appearance: none; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; margin: 0; border: 1.5px solid currentColor; border-radius: 50%; background: none; cursor: pointer; }
.opciones input::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--balduque); transform: scale(0); transition: transform 180ms var(--ease); }
.opciones input:checked { border-color: var(--balduque); }
.opciones input:checked::before { transform: scale(1); }
.opciones input:focus-visible { outline: 2px solid var(--balduque); outline-offset: 3px; }
.campo { display: grid; gap: .4rem; margin-bottom: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--linea); }
.campo > span { display: flex; justify-content: space-between; font-family: var(--f-sans); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.campo__cuenta { letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: .7rem 0; border: 0; border-bottom: 1.5px solid var(--tinta); border-radius: 0; background: transparent;
  font-family: var(--f-serif); font-size: 1.125rem; line-height: 1.5;
}
.campo textarea { resize: vertical; min-height: 7rem; background: repeating-linear-gradient(transparent, transparent 1.66rem, var(--linea) 1.66rem, var(--linea) calc(1.66rem + 1px)); line-height: 1.66rem; padding-top: .3rem; }
.campo select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317171B' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .25rem center / .75rem; cursor: pointer; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-bottom-color: var(--balduque); box-shadow: 0 1.5px 0 var(--balduque); }
.campo [aria-invalid="true"] { border-bottom-color: var(--balduque); }
.hoja__error { margin: 1rem 0 0; font-family: var(--f-sans); font-size: .9375rem; font-weight: 600; color: var(--balduque); }
.hoja__botones { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.hoja__botones [data-sigue] { margin-left: auto; background: var(--balduque); }
.hoja__botones [data-sigue]:hover { background: var(--tinta); }
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.6rem; cursor: pointer;
  font-family: var(--f-sans); font-weight: 600; font-size: .875rem; letter-spacing: .14em; text-transform: uppercase;
  background: var(--tinta); color: var(--papel); border: 0; border-radius: 0;
  transition: background-color var(--d-rapido) var(--ease), color var(--d-rapido) var(--ease), transform var(--d-rapido) var(--ease);
}
.boton:hover { background: var(--balduque); }
.boton:active { transform: translateY(1px); }
.boton--linea { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.boton--linea:hover { background: var(--tinta); color: var(--papel); }
.hoja__atada { text-align: left; padding: 1rem 0 0; }
.hoja__atada:focus { outline: none; }
.lazo--cierre { position: relative; width: 6.5rem; margin: 0 0 1rem 1.5rem; }
.hoja__atada-titulo { margin: 0 0 .75rem; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; letter-spacing: -.02em; }
.hoja.es-atada > :not(.hoja__atada) { display: none; }
.hoja.es-atando > :not(.hoja__atada) { opacity: 0; transition: opacity 250ms var(--ease); }

.consulta__rejilla:has(.hoja.es-atando) .despues { opacity: 0; transition: opacity 250ms var(--ease); }
.despues h3 { margin: 0 0 1rem; font-weight: 400; font-size: 1.5rem; letter-spacing: -.01em; }
.despues ol { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.despues li { position: relative; padding: 1rem 0 1rem 2.25rem; border-top: 1px solid var(--linea); }
.despues li::before { counter-increment: paso; content: counter(paso); position: absolute; left: 0; top: 1rem; font-style: italic; color: var(--balduque); font-size: 1.25rem; line-height: 1.3; }
.despues li span { display: block; font-family: var(--f-sans); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: .2rem; }
@media (max-width: 1099px) { .despues { margin-top: 2.5rem; max-width: 44rem; } }

/* ------------------------------------------------------------ colofón, sumario y folio */
/* el cierre: la cinta llega al pie y ata un lazo (su nudo cae justo en el filete de arriba); la marca a tamaño
   portada, la llamada y, debajo, en letra pequeña, la ficción, la IA y las licencias */
.colofon { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; padding: clamp(4.5rem, 8vw, 7rem) var(--lado) 3.5rem var(--margen); border-top: 1px solid var(--linea); color: var(--tinta-2); }
.lazo--fin { width: var(--lazo-w); left: calc(var(--cinta-x) + 3px - var(--lazo-w) / 2); top: calc(var(--lazo-w) * 200 / 180 * -0.35); z-index: 4; }
.colofon__cierre { grid-column: 1; }
.colofon__marca { margin: 0 0 2rem; color: var(--tinta); font-weight: 300; font-size: clamp(4.2rem, 9.4vw, 10rem); line-height: .84; letter-spacing: -.035em; font-variation-settings: "opsz" 72; }
.colofon__accion { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; margin: 0; }
.colofon__lema { font-style: italic; font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); line-height: 1.1; color: var(--tinta); }
/* quién está detrás, en una línea (LSSI art. 10 y Ley 3/1991: se nombra a Beltran Labs y se dice que el despacho no existe) */
.colofon__letra { grid-column: 1 / -1; margin: clamp(3rem, 5vw, 4.5rem) 0 0; padding-top: 1.25rem; border-top: 1px solid var(--linea); font-size: .8125rem; line-height: 1.55; }
.colofon__letra a { color: var(--balduque); font-weight: 600; }
.sumario { grid-column: 2; margin: .6rem 0 0; }
.sumario__titulo { margin: 0 0 .75rem; font-family: var(--f-sans); font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2); }
.sumario__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.colofon .sumario__lista a { display: flex; gap: 1.25rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--linea); color: var(--tinta); font-weight: 400; text-decoration: none; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.1; letter-spacing: -.015em; transition: color var(--d-rapido) var(--ease); }
.sumario__lista a span { min-width: 2.75rem; font-style: italic; font-weight: 300; color: var(--balduque); }
.colofon .sumario__lista a:hover { color: var(--balduque); }

/* la vista previa que sigue al puntero en el índice y el sumario (sin movimiento reducido); sin ratón, la del sumario hace de
   portadilla al tocar una entrada (ver más abajo) */
.vista { position: fixed; left: 0; top: 0; z-index: 60; width: clamp(11rem, 16vw, 16rem); pointer-events: none; visibility: hidden; transition: visibility 0s linear 650ms; }
.vista.es-activa { visibility: visible; transition-delay: 0s; }
.vista__ia { position: absolute; top: 0; right: 0; z-index: 1; margin: 0; }   /* fuera del recorte: entra con la vista, no con la foto */
.sumario .vista { width: clamp(360px, 25vw, 420px); }   /* en el sumario, grande: la lámina hace de portadilla del capítulo */
/* pantalla ancha y baja (1366×650, 1280×720…): el colofón cabe entero sobre el folio, para que al llegar abajo se vea
   el lazo que ata la cinta (a 1440×900 ya cabía) */
@media (min-width: 1000px) and (max-height: 860px) {
  .colofon { padding-top: 3.25rem; padding-bottom: 1.5rem; }
  .colofon__marca { font-size: min(9.4vw, 17vh); margin-bottom: 1.25rem; }
  .colofon .sumario__lista a { font-size: min(2.4rem, 4.4vh); padding: .45rem 0; }
  .colofon__letra { margin-top: 1.75rem; padding-top: 1rem; }
}
.vista__marco { overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 650ms var(--telon); box-shadow: 0 24px 50px -24px rgb(23 23 27 / .5); }
.vista__marco img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; scale: 1.15; transition: scale 900ms var(--pluma); }
.vista.es-activa .vista__marco { clip-path: inset(0 0 0 0); }
.vista.es-activa .vista__marco img { scale: 1; }
/* sin ratón, la vista del sumario es la portadilla que se abre al tocar una entrada y acompaña el viaje al capítulo:
   a la derecha de la pantalla, del tamaño que quepa entero sobre el folio. Si al viajar fuera a tapar el aviso de IA, el
   aviso M-1 o una micro-marca a la vista, se retira en el acto (sin fundido) */
@media (hover: none) { .sumario .vista { width: min(16rem, 44vw, calc((100svh - 10rem) * .75)); } }
.vista.es-cedida { visibility: hidden; transition: none; }

.folio {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: var(--folio);
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.5rem;
  padding: 0 clamp(1rem, 3vw, 2rem); background: var(--papel); border-top: 1px solid rgb(23 23 27 / .16);
  font-family: var(--f-sans); font-size: .8125rem;
}
/* el folio lleva el logotipo, con la misma q (misma receta que la portada, en pequeño) */
.folio__marca { font-family: var(--f-serif); font-weight: 300; font-size: 1.5rem; line-height: .84; letter-spacing: -.02em; font-variation-settings: "opsz" 72; text-decoration: none; }
.folio__capitulo { margin: 0; justify-self: center; height: 1.3em; overflow: hidden; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.folio__capitulo > span { display: block; transition: transform 320ms var(--ease), opacity 320ms var(--ease); }
.folio__capitulo.es-cambio > span { transform: translateY(-110%); opacity: 0; transition: none; }
.folio__indice { background: none; border: 0; padding: .5rem 0; cursor: pointer; letter-spacing: .14em; text-transform: uppercase; font-size: .8125rem; text-decoration: underline; text-underline-offset: .25em; }
.folio__consulta { color: var(--papel); background: var(--balduque); text-decoration: none; padding: .55rem .9rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; transition: background-color var(--d-rapido) var(--ease); }
.folio__consulta:hover { background: var(--tinta); }
/* objetivos de toque de 44 px como mínimo (folio, llamadas, notas y enlaces del pie): la zona que se toca crece por
   fuera, transparente, sin mover ni una línea */
.folio__marca, .folio__indice, .folio__consulta, .enlace-texto, sup a, .nota a, .colofon__letra a { position: relative; }
.folio__marca::before, .folio__indice::before, .folio__consulta::before, .enlace-texto::before, sup a::before, .nota a::before, .colofon__letra a::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); translate: -50% -50%;
}
.colofon__letra a { white-space: nowrap; }
/* con el dedo, los dos enlaces de la letra pequeña quedan uno sobre otro: a 44 px de interlínea sus zonas no se pisan */
@media (pointer: coarse) { .colofon__letra { line-height: 44px; } }

.indice { border: 0; border-left: 6px solid var(--balduque); padding: 2.5rem 2.5rem 2.25rem 2.75rem; max-width: 32rem; width: calc(100% - 2rem); color: var(--tinta);
  background: linear-gradient(transparent calc(33.33% - 1px), rgb(23 23 27 / .04) 33.33%, transparent calc(33.33% + 1px), transparent calc(66.66% - 1px), rgb(23 23 27 / .04) 66.66%, transparent calc(66.66% + 1px)), var(--papel);
  box-shadow: 0 1px 0 var(--linea), 0 40px 70px -40px rgb(23 23 27 / .45); }
.indice::backdrop { background: rgb(232 230 224 / .86); }
.indice h2 { margin: 0 0 1.5rem; font-family: var(--f-sans); font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.indice ol { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.indice a { display: flex; gap: 1.25rem; align-items: baseline; padding: .75rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; font-size: 1.375rem; transition: color var(--d-rapido); }
.indice a span { min-width: 2.5rem; font-style: italic; color: var(--balduque); }
.indice a:hover { color: var(--balduque); }
@media (prefers-reduced-motion: no-preference) { .indice[open] { animation: despliega 760ms var(--telon) both; } }
/* se abre como una carta doblada en tres: primero el tercio de arriba, una pausa en el pliegue y el resto */
@keyframes despliega { 0% { clip-path: inset(0 0 100% 0); } 38% { clip-path: inset(0 0 66.6% 0); } 52% { clip-path: inset(0 0 66.6% 0); } 100% { clip-path: inset(0 0 0 0); } }

/* ------------------------------------------------------------ tableta y teléfono */
@media (min-width: 1100px) {
  /* II: la nota al pie pasa al margen derecho, a la altura de su llamada */
  #cap-2 { display: grid; grid-template-columns: minmax(0, 40rem) minmax(14rem, 1fr); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  #cap-2 .capitulo__cabeza { grid-column: 1 / -1; }
  #cap-2 .clausulas { display: contents; }
  #cap-2 .clausula { grid-column: 1; }
  #cap-2 .nota--margen { grid-column: 2; grid-row: 2 / span 4; align-self: start; margin: .5rem 0 0; position: sticky; top: 3rem; border-top: 2px solid var(--balduque); }
  /* VI: la hoja y lo que pasa después, lado a lado */
  .consulta__rejilla { display: grid; grid-template-columns: minmax(0, 44rem) minmax(15rem, 22rem); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; }
}
@media (max-width: 900px) {
  .confidencial, .capitulo--partido { grid-template-columns: 1fr; }
  .lamina--columna { max-width: 26rem; }
  .socios li { grid-template-columns: minmax(0, 1fr); row-gap: .6rem; }
  .lamina--frontis { grid-template-columns: minmax(0, 1fr); }
  .lamina--frontis .lamina__marco { grid-column: 1; max-width: 26rem; }
  .lamina--frontis figcaption { grid-column: 1; grid-row: 2; justify-self: start; margin: .9rem 0 0; text-align: left; }
  .colofon { grid-template-columns: minmax(0, 1fr); }
  .sumario { grid-column: 1; margin-top: 3.5rem; }
  .colofon__letra { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  :root { --margen: 3.6rem; --cinta-x: 1.9rem; --lado: 1.25rem; }
  .portada { padding-top: 3.5rem; }
  .capitulo__cabeza { margin-left: 0; gap: 1rem; flex-direction: column; align-items: flex-start; }
  .capitulo__num { min-width: 0; text-align: left; font-size: 3.5rem; }
  .materias li { grid-template-columns: 1fr; }
  /* el «§ n» del margen no cabe junto a la cinta: sube encima de la materia, en la misma voz */
  .materias__par { position: static; width: auto; text-align: left; margin-bottom: -.2rem; }
  .hoja { padding: 1.5rem 1.25rem; }
  /* el folio: del capítulo, solo su numeral (el nombre no cabe junto a la marca, el índice y la consulta) */
  .folio { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .75rem; }
  .folio__nombre { display: none; }
  .lazo--portada { top: 1rem; }
  .expediente { padding: 1.25rem 1rem; }
  .lamina--sangre .lamina__marco { aspect-ratio: 16 / 9; }
  /* el aviso de IA, a la derecha del lazo (que aquí cuelga casi hasta el margen de texto) y en tres líneas hasta 320 px, por
     encima del membrete (a 15 px y con su relleno eran cuatro y lo pisaba) */
  .aviso-ia { font-size: .875rem; padding-right: 0; }
  .js .aviso-ia { top: max(.625rem, env(safe-area-inset-top)); left: calc(var(--margen) + .5rem); width: calc(100% - var(--margen) - 1.25rem); }
}
/* por debajo de 360 px ni el numeral cabe sin encoger los objetivos de toque: el capítulo lo marcan su cabecera y la cinta */
@media (max-width: 359px) {
  .folio { grid-template-columns: auto 1fr auto; }
  .folio__capitulo { display: none; }
}

/* ==========================================================================
   MOVIMIENTO · lo dispara el JS con .ha-entrado (una vez) y .es-visible
   (láminas, tras img.decode()). Nada de esto existe sin .js.
   ========================================================================== */
.a-letras .letra { display: inline-block; }
/* la máscara de cada línea (SplitText): un poco más honda para no cortar los rasgos descendentes */
.sl-mask { padding-bottom: .14em; margin-bottom: -.14em; }
.es-leido .sl-mask { overflow: visible !important; } /* ya ha entrado: la máscara no recorta ni el foco ni los rasgos */
/* reglas que se trazan: la de la definición de portada y la de cada fila de lista */
.a-regla { position: relative; }
.a-regla::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--regla, var(--linea)); transform-origin: 0 50%; }

@media (prefers-reduced-motion: no-preference) {
  /* carga en frío: la portada no se enseña hasta que arranca la apertura (fuentes cargadas y texto partido);
     así no hay texto en la fuente de reserva ni una marca que aparece y vuelve a esconderse */
  .js:not(.en-marcha) .portada > * { opacity: 0 !important; }
  /* portada: la marca letra a letra, la definición y su regla, el membrete */
  .js .a-letras .letra { opacity: 0; transform: translateY(.18em); filter: blur(6px); transition: opacity 900ms var(--ease), transform 1100ms var(--ease), filter 900ms var(--ease); transition-delay: calc(var(--i) * 70ms + 150ms); }
  .js .ha-entrado .a-letras .letra { opacity: 1; transform: none; filter: none; }
  /* la cola de la q cae cuando su letra ya se ha posado */
  .js .a-letras .letra.letra--q::after { transform: scaleY(0); transition: transform 900ms var(--pluma); transition-delay: calc(var(--i) * 70ms + 950ms); }
  .js .ha-entrado .a-letras .letra.letra--q::after { transform: none; }
  .js .portada__definicion, .js .portada__membrete { opacity: 0; transition: opacity 1100ms var(--ease) 250ms; }
  .js .ha-entrado .portada__definicion, .js .ha-entrado .portada__membrete { opacity: 1; }
  .js .portada__definicion::before { transform: scaleY(0); transition: transform 1400ms var(--telon) 300ms; }
  .js .ha-entrado .portada__definicion::before { transform: none; }

  /* líneas que suben dentro de su máscara (SplitText las parte; --l es el orden de la línea) */
  .js [data-lineas]:not(.es-partido) { visibility: hidden; }
  .js [data-lineas] .sl { translate: 0 118%; transition: translate 1250ms var(--pluma); transition-delay: calc(var(--l, 0) * 105ms + var(--d0, 0ms) + var(--lote, 0) * 140ms); }
  .js [data-lineas].ha-entrado .sl { translate: none; }
  .portada__titulo { --d0: 380ms; }
  .portada__entrada { --d0: 820ms; }
  /* capítulo II cosido: cada cláusula pasa de tinta tenue a tinta plena cuando la cinta llega a su agujero */
  .js .con-cosido .clausula { opacity: .3; transition: opacity 500ms var(--ease); }
  .js .con-cosido .clausula.es-cosida { opacity: 1; }
  /* en la portada manda la coreografía, no el orden de llegada */
  .portada [data-lineas], .portada .a-funde { --lote: 0 !important; }

  /* fundido corto para lo pequeño */
  .js .a-funde { opacity: 0; transition: opacity 1000ms var(--ease) calc(var(--d0, 0ms) + var(--lote, 0) * 110ms); }
  .js .a-funde.ha-entrado { opacity: 1; }
  .portada__accion { --d0: 1350ms; }

  /* filas: la regla se traza y el contenido sube por su máscara */
  .js .a-regla::before { transform: scaleX(0); transition: transform 1200ms var(--telon) calc(var(--lote, 0) * 110ms); }
  .js .a-regla.ha-entrado::before { transform: none; }
  .js .a-regla > :not(.materias__par) { clip-path: inset(100% -1em -.4em -1em); translate: 0 .45em; transition: clip-path 1000ms var(--telon), translate 1000ms var(--telon); transition-delay: calc(var(--lote, 0) * 110ms + 240ms); }
  .js .a-regla > :last-child { transition-delay: calc(var(--lote, 0) * 110ms + 380ms); }
  .js .a-regla.ha-entrado > :not(.materias__par) { clip-path: inset(-.3em -1em -.4em -1em); translate: none; }
  .js .a-regla .materias__par { opacity: 0; transition: opacity 800ms var(--ease) calc(var(--lote, 0) * 110ms + 500ms); }
  .js .a-regla.ha-entrado .materias__par { opacity: 1; }

  /* fichas: el expediente y la hoja salen de la carpeta, de izquierda a derecha */
  .js .a-ficha { clip-path: inset(0 100% 0 0); transition: clip-path 1300ms var(--telon) calc(var(--lote, 0) * 110ms); }
  .js .a-ficha.ha-entrado { clip-path: inset(-80px -80px -80px -80px); }
  /* tachaduras: la barra de tinta se traza cuando la ficha ya está fuera */
  .js .tachado { transform: scaleX(0); transition: transform 700ms var(--telon); transition-delay: calc(var(--i, 0) * 200ms + 900ms); }
  .js .expediente.ha-entrado .tachado { transform: none; }

  /* cabeceras de capítulo: numeral y título suben por su máscara; la regla roja se traza */
  .js .a-numeral { clip-path: inset(100% 0 0 0); transform: translateY(.2em); transition: clip-path 1000ms var(--telon), transform 1000ms var(--telon); }
  .js .ha-entrado .a-numeral { clip-path: inset(-10% -10% -10% -10%); transform: none; }
  .js .capitulo__titulo { clip-path: inset(100% -.3em -.3em -.3em); translate: 0 .35em; transition: clip-path 1100ms var(--telon) 180ms, translate 1100ms var(--telon) 180ms; }
  .js .ha-entrado .capitulo__titulo { clip-path: inset(-.3em -.3em -.3em -.3em); translate: none; }
  .js .capitulo__cabeza::after { transform: scaleX(0); transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1) 250ms; }
  .js .ha-entrado .capitulo__cabeza::after { transform: none; }

  /* tarifa: la línea de puntos se traza */
  .js .tarifa dt::after { transform: translateY(-.3em) scaleX(0); transition: transform 900ms var(--ease) 300ms; }
  .js .tarifa .ha-entrado dt::after { transform: translateY(-.3em); }

  /* láminas: la carpeta se abre de izquierda a derecha con el filo rojo por delante; dentro, la foto se asienta */
  .js .lamina__hoja { clip-path: inset(0 100% 0 0); transition: clip-path 1700ms var(--telon); }
  .js .lamina__hoja::after { content: ""; position: absolute; inset: 0; border-right: 2px solid var(--balduque); transform: translateX(-100%); transition: transform 1700ms var(--telon), opacity 500ms linear 1600ms; pointer-events: none; }
  .js .lamina__img { scale: 1.28; transition: scale 2600ms var(--pluma); }
  .js .lamina.es-visible .lamina__hoja { clip-path: inset(0 0 0 0); }
  .js .lamina.es-visible .lamina__hoja::after { transform: none; opacity: 0; }
  /* la micro-marca de IA entra con la carpeta (en 250 ms, cuando de la foto apenas asoma el filo) y se va a los 1,8 s;
     una vez por lámina y carga (.es-visible no se quita nunca). En la vista previa, cada vez que se muestra */
  .js .lamina.es-visible .lamina__ia, .js .vista.es-activa .vista__ia { animation: micro-ia 1800ms linear both; }
  /* el aviso de IA sale de la carpeta, como el expediente y la hoja, y se desvanece */
  .js .aviso-ia { clip-path: inset(0 100% 0 0); }
  .js .aviso-ia.es-visible { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--telon); }
  .js .aviso-ia.es-retirado { transition: opacity 700ms var(--ease); }
  .js .lamina.es-visible .lamina__img { scale: 1.1; }
  .js .lamina figcaption { opacity: 0; transition: opacity 1000ms var(--ease) 900ms; }
  .js .lamina.es-visible figcaption { opacity: 1; }

  .js .hoja__bloque:not([hidden]) { animation: hoja 520ms var(--ease); }
  .hoja.es-atada .hoja__atada > :not(.lazo--cierre) { animation: aparece 550ms var(--ease) 650ms both; }
  .hoja.es-atada .lazo--cierre .lazo__lazada, .hoja.es-atada .lazo--cierre .lazo__cabo { animation: ata 1200ms var(--telon) both; }
  .hoja.es-atada .lazo--cierre .lazo__cabo { animation-delay: 700ms; }
  .hoja.es-atada .lazo--cierre .lazo__nudo { animation: nudo 500ms var(--ease) 500ms both; }
}
@keyframes hoja { from { opacity: 0; transform: translateX(24px); } }
@keyframes aparece { from { opacity: 0; transform: translateY(6px); } }
@keyframes ata { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes nudo { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes micro-ia { 0% { opacity: 0; } 14%, 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes micro-ia-seca { from { opacity: 1; } to { opacity: 0; } }

/* movimiento reducido: todo a la vista, sin desplazamientos; solo fundidos cortos. La foto se funde en su hoja, no en el
   marco: la micro-marca de IA, que va en el marco, aparece y se retira de golpe (mismo tiempo, 1,8 s), como el aviso */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .folio__capitulo span { transition: none; }
  .js .a-funde, .js [data-lineas], .js .a-ficha, .js .a-regla, .js .lamina__hoja { opacity: 0; transition: opacity 400ms linear; }
  .js .a-funde.ha-entrado, .js [data-lineas].ha-entrado, .js .a-ficha.ha-entrado, .js .a-regla.ha-entrado, .js .lamina.es-visible .lamina__hoja { opacity: 1; }
  .js .lamina.es-visible .lamina__ia { animation: micro-ia-seca 1800ms step-end both; }
  .materias li h3, .materias li::after { transition: none; }
}