La enredadera serpentea entre filas y los brotes cuelgan de un tallo

El dibujo del tallo de ordenador pasa a llevar dos filas: la pasada y su
espejo. Entra y sale vertical por las dos esquinas, así que empalma consigo
mismo por los dos lados y con repeat-y cada dos filas serpentea sin junta. En
colectivos, que tiene doce hojas, se veían dos ramas sueltas: la segunda
empezaba otra vez desde el margen izquierdo, debajo de la espiral con la que
acababa la primera.

El fondo va ahora en dos capas porque la última fila remata y las de arriba
siguen: .enredadera::before pinta todas menos la última y ::after pinta la
última con la espiral, en espejo si la fila es par (lo decide un :has()). Las
reglas por hoja pasan de tandas de seis a tandas de doce: las seis del espejo
son las mismas del revés y con el giro cambiado de signo.

Los tres brotes de REDES llevan su propio tallo, encadenado del agarre a la
primera hoja y de hoja en hoja, en vez de salir flotando. Para eso lo que se
coloca es la punta del rabillo -translate(-50%,0)- y no el centro de la hoja,
que va en vw y no dejaba que el ángulo fuera constante.

En ordenador el brote baja a la izquierda y ya no se sale por abajo de la
pantalla (se salía en seis de las siete medidas, hasta 41px a 1920x1080). En
móvil sale por la izquierda y trepa por el margen en vez de salir a la
derecha, donde asoman Eventos y Campañas: de 48 solapes en las nueve
pantallas a cero.

Banco: 0 fallos y 0 avisos en 150 mediciones.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FRjJnc4j5P7f5gCjkVmNY9

README.md

@@ -139,7 +139,7 @@ amplitud, toca también el `--centrar` de las hojas, que vale `AM/100`.
 Las reglas por hoja son de la forma:
 
 ```css
-.enredadera > li:nth-child(6n+4) .hoja{ --giro:154deg; --tam:0.92; }
+.enredadera > li:nth-child(12n+4) .hoja{ --giro:154deg; --tam:0.92; }
 ```
 
 Ese `.hoja` es un **descendiente**, así que alcanza también a las hojas que
@@ -155,8 +155,8 @@ necesitas un tamaño propio, escríbelo en la medida, sin `var(--tam)`.
 
 ## La raíz (los dibujos de la enredadera)
 
-Los tres dibujos —la bajada desde el título, el tramo de ordenador y el tallo
-de móvil— **no están escritos a mano**: los genera un script, porque el
+Los dibujos —la bajada desde el título, la franja de ordenador, su remate y el
+tallo de móvil— **no están escritos a mano**: los genera un script, porque el
 trenzado hay que calcularlo (la perpendicular a lo largo del recorrido).
 
 ```sh
@@ -166,12 +166,40 @@ cd ../prueba && python3 raiz2.py     # regenera raiz2.json
 Después hay que **reinyectar los SVG en el CSS**. Y lo más importante:
 
 > Los puntos por donde pasa la raíz y las alturas de las que cuelgan las hojas
-> (`--y` en las reglas `nth-child(6n+N)`) **tienen que coincidir**. Si mueves
+> (`--y` en las reglas `nth-child(12n+N)`) **tienen que coincidir**. Si mueves
 > uno sin mover el otro, las hojas quedan flotando sin tocar la raíz.
 
 Para eso está `../coherencia.py`: compara el CSS contra el JSON y avisa.
 **Pásalo siempre después de tocar la raíz.**
 
+### La franja de ordenador: dos filas, no una
+
+La franja es la única parte que se **repite**, porque una página puede tener
+más hojas de las que caben en una fila: colectivos tiene doce, o sea dos.
+
+El dibujo lleva **dos filas**: la pasada de izquierda a derecha y, debajo, esa
+misma pasada en **espejo** —un `<use>` del mismo grupo, así que no pesa el
+doble—. Entra y sale **vertical** por las dos esquinas, de modo que empalma
+con su espejo por la derecha y con la copia siguiente por la izquierda. Puesto
+con `repeat-y` y `background-size:100% calc(var(--fila) * 2)`, la enredadera
+serpentea por las filas que haga falta **sin una sola junta**. Antes el dibujo
+era de una fila y remataba en espiral: en colectivos se veían dos ramas
+sueltas, la segunda empezando otra vez desde el margen izquierdo.
+
+De ahí salen tres cosas encadenadas:
+
+- La tanda de las reglas por hoja es de **doce** (`nth-child(12n+N)`), no de
+  seis: las seis de la pasada y las seis del espejo, que son **las mismas
+  leídas del revés y con el giro cambiado de signo**. `../coherencia.py` lo
+  comprueba.
+- El tallo va en **dos capas**, no en el fondo del `<ul>`: `.enredadera::before`
+  pinta todas las filas menos la última (`top:0; bottom:var(--fila)`) y
+  `.enredadera::after` pinta la última con el remate en espiral. Las dos con
+  `z-index:-1`, que es donde estaba el fondo al que sustituyen.
+- Si la última fila es **par**, la pasada va de derecha a izquierda y el remate
+  se pinta en espejo. Lo decide un `:has()` sobre dónde cae el último `<li>`
+  dentro de la tanda de doce, así que añadir una hoja sigue sin tocar nada.
+
 ### La bajada del título
 
 Es el dibujo más delicado de los tres, porque empalma con dos cosas a la vez:
@@ -190,6 +218,38 @@ el título por arriba y la franja por la esquina de abajo a la izquierda.
 
 ---
 
+## El brote de REDES
+
+Al pulsar REDES salen tres hojas pequeñas, una por red. **Cuelgan de un tallo
+de verdad**, no flotan: cada `<li>` del brote lleva un `::before` que es su
+trozo de tallo, y los tres se encadenan —el primero va hasta el agarre en la
+enredadera, el segundo hasta el primero y el tercero hasta el segundo—, así que
+lo que se dibuja es **un solo brote con tres hojas**, no tres hojas sueltas.
+
+Dos cifras por hoja bastan, y son las mismas que la colocan leídas del revés:
+
+```css
+.brotes > li:nth-child(2){ --largo:0.605; --ang:262.4deg; }
+```
+
+- `--largo` va en unidades de `--r` y `--ang` es **absoluto**, porque el
+  `<li>` no gira (gira la hoja que lleva dentro).
+- Por eso lo que se coloca es la **punta del rabillo** —`translate(-50%,0)`,
+  no `(-50%,-50%)`—: si se colocara el centro de la hoja, el punto donde
+  empieza el tallo dependería de lo que mida la hoja, que va en `vw`, y el
+  ángulo no podría ser una constante.
+- Si mueves un nudo, recalcula las dos: `--largo` es la distancia al nudo
+  anterior y `--ang` = `atan2(dx, -dy)`.
+
+En **ordenador** el brote sale hacia abajo y a la izquierda, al hueco que
+dejan Eventos y Campañas. En **móvil** no cabe un abanico: el tallo es
+vertical y las hojas ocupan los ~130px del centro, así que lo único libre son
+las franjas de los lados —62px a 390, 86 a 360, 110 a 320—. Ahí el brote sale
+por la **izquierda**, pasa por debajo de la hoja de REDES y **trepa** por el
+margen. Antes salía a la derecha y se comía Eventos y Campañas.
+
+---
+
 ## El banco de pruebas
 
 ```sh