/* franbencosme.com v3 — LAS HIJAS: la página de ensayo (×3) y la de proyecto (×5).
   Va DESPUÉS de estilo.css y sólo añade lo que el viaje no tiene: una página que baja, sin motor y sin escena.
   Los cuadros: ensayo 343:2 / 343:113 (1440×1200) · proyecto 340:3 / 342:2 (1440×2400). PLANTILLA-ENSAYO.md y
   PLANTILLA-PROYECTO.md dicen qué es cada bloque dentro del lugar; aquí sólo se le da la forma del cuadro.
   Lo generan `tools/hijas.js`; no se editan a mano. */

/* el marco sin motor: la cabecera fija del viaje, con el switch de cielo visible aunque no haya escena */
html.hija .marco .switch{display:inline-flex}
html.hija .marco .menu{display:flex}
html.hija .switch{display:inline-flex}
html.hija body{min-height:100svh}

/* ---------- común: la vuelta, el kicker, el titular, la salida y el correo ---------- */
.hija{position:relative;z-index:1;padding:calc(4.6rem + 2vh) var(--pad) clamp(3rem,6vh,5rem)}
.vuelta{display:inline-block;font-size:var(--t-rotulo);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;margin:0 0 2.6rem}
.vuelta:hover{color:var(--signal)}
.hija .cintillo{margin-bottom:1.1rem}
.hija .titular{margin-bottom:2.2rem}
.hija .titular .punto{margin-left:.18em}
.salida{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:start;padding-top:1.6rem;border-top:1px solid var(--line);margin-top:clamp(3rem,8vh,6rem)}
.salida .rotulo,.escribe .rotulo{display:block;font-size:var(--t-rotulo);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .6rem}
.salida .siguiente{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2vw,1.75rem);letter-spacing:-.03em;text-decoration:none;color:var(--ink)}
.salida .siguiente:hover{color:var(--signal)}
.salida .siguiente::after{content:" →";font-size:1.35em;line-height:0;vertical-align:-.04em;-webkit-text-stroke:.05em currentColor}
html[data-cielo="atlas"] .salida .siguiente{color:var(--signal)}
.salida small{display:block;margin-top:.4rem;font-size:var(--t-apoyo);color:var(--ink-3)}
.salida small a{color:inherit}
.escribe a{font-family:var(--display);font-weight:500;font-size:clamp(1.1rem,1.6vw,1.45rem);letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
html[data-cielo="atlas"] .escribe a{color:var(--signal)}
.hija .sello{margin-top:2.4rem}
/* lo que aún es de Fran, a la vista, como en el cuadro */
.p{color:var(--halo);font-size:.92em}
.fran{color:var(--halo)}

/* ---------- el ensayo: una columna de 660, y nada compitiendo al lado ---------- */
.ensayo{width:min(660px,100%);margin:0 auto}
.ensayo .vuelta{margin-bottom:2.2rem}
.ensayo .titular{max-width:none}
.argumento{color:var(--ink-2);font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.62}
.argumento p{margin:0 0 1.5rem}
.argumento h2{font-weight:500;font-size:1.25em;letter-spacing:-.02em;line-height:1.25;color:var(--ink);margin:2.4rem 0 .9rem}
.argumento blockquote{margin:2rem 0;padding-left:1.2rem;border-left:2px solid var(--signal);color:var(--ink);font-family:var(--display);font-weight:300;font-size:1.25em;line-height:1.35}
.argumento blockquote p{margin:0}
.ensayo .nota .mov{display:none}
.ensayo .nota{font-size:var(--t-rotulo);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:2.5rem 0 0}
.ensayo .salida{margin-top:clamp(4rem,10vh,7rem);grid-template-columns:1fr}
.ensayo .escribe{margin-top:2.2rem}

/* ---------- el proyecto: la llegada a la izquierda, el cuerpo a la derecha, y las láminas a todo el ancho ---------- */
.proyecto{position:relative}
.llegada{width:min(560px,100%)}
.llegada .lede{color:var(--ink);max-width:none}
.registro-cuerpo{width:min(560px,100%);margin:3rem 0 0;font-size:var(--t-apoyo)}
.registro-cuerpo .rotulo{display:block;font-size:var(--t-rotulo);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.7rem}
.registro-cuerpo dl{margin:0;display:grid;grid-template-columns:9.5rem minmax(0,1fr)}
.registro-cuerpo dt,.registro-cuerpo dd{margin:0;padding:.55rem 0;border-bottom:1px solid var(--line)}
.registro-cuerpo dt{font-weight:500;color:var(--ink-2);padding-right:.9rem}   /* el canal entre etiqueta y respuesta: a 14 px «What I did not do» tocaba su respuesta en el teléfono (22 oct) */
.registro-cuerpo dd{color:var(--ink-2)}
/* el cuerpo: un disco a la derecha de la llegada. En Ouranos, una esfera en su sombra; en Atlas, el grabado a rayas.
   Betel se posa en su borde: aquí se aterrizó. */
.cuerpo{position:absolute;right:calc(var(--pad) + 6vw);top:26rem;width:min(250px,22vw);aspect-ratio:1;pointer-events:none}
.cuerpo svg{width:100%;height:100%;overflow:visible}
.cuerpo .esfera{fill:url(#esfera);stroke:color-mix(in srgb,var(--ink-3) 50%,transparent);stroke-width:.6}
.cuerpo .rayas{fill:url(#rayas);stroke:var(--ink);stroke-width:.8;display:none}
html[data-cielo="atlas"] .cuerpo .esfera{display:none}
html[data-cielo="atlas"] .cuerpo .rayas{display:block}
.cuerpo .betel{fill:var(--signal)}
.cuerpo .halo{fill:none;stroke:var(--signal);stroke-width:.8;opacity:.7}
.cuerpo .polvo{fill:var(--ink-3);opacity:.55}
html[data-cielo="atlas"] .cuerpo .polvo{fill:none;stroke:var(--ink-3);stroke-width:.6}

.bloque-h{width:min(560px,100%);margin:3.2rem 0 0}
.bloque-h .rotulo{display:block;font-size:var(--t-rotulo);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.9rem}
.bloque-h p{font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.5;color:var(--ink)}
.bloque-h .dato{margin-top:.6rem;font-size:var(--t-apoyo);color:var(--ink-2)}

/* la rueda: cuatro estados del mismo cuerpo. En Ouranos, cuatro puntos con halo sobre una órbita; en Atlas, las
   fases de una luna — nueva, creciente, llena, menguante — que es exactamente lo que son. */
.rueda{margin:3.4rem 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 4rem;align-items:center}
.rueda .rotulo{grid-column:1/-1;display:block;font-size:var(--t-rotulo);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.rueda svg{width:min(420px,100%);height:auto;overflow:visible;font-family:var(--body);font-size:12px;fill:var(--ink)}
.rueda .orbita{fill:none;stroke:var(--ink-3);stroke-width:.8;opacity:.7}
.rueda .fase{stroke:var(--ink);stroke-width:1}
.rueda .fase.n0{fill:var(--ink)}                    /* nació: nueva, oscura */
.rueda .fase.n2{fill:var(--bg)}                     /* se convirtió: llena de luz */
.rueda .fase.n3{fill:var(--bg)}
.rueda .media{fill:var(--ink)}
/* 22 oct (fase 2, punto 5): los rótulos se apartan de su punto —el «kept» y el «dropped» quedaban casi tocándolo—. Las páginas se editan a mano
   (tools/hijas.js está retirado), así que se mueven aquí, una vez para las doce: arriba, derecha, abajo, izquierda. */
.rueda svg text:nth-of-type(1){transform:translateY(-6px)}
.rueda svg text:nth-of-type(2){transform:translateX(10px)}
.rueda svg text:nth-of-type(3){transform:translateY(6px)}
.rueda svg text:nth-of-type(4){transform:translateX(-10px)}
html[data-cielo="ouranos"] .rueda .fase{fill:#c8c6ff;stroke:none}
html[data-cielo="ouranos"] .rueda .media{display:none}
html[data-cielo="ouranos"] .rueda .fase{filter:drop-shadow(0 0 6px rgba(200,198,255,.9))}
.rueda ol{list-style:none;margin:0;padding:0;font-size:var(--t-cuerpo);line-height:1.5;color:var(--ink)}
.rueda li b{font-weight:500}
.rueda .nota{font-size:var(--t-apoyo);color:var(--ink-3);margin-top:2rem;max-width:46ch}

/* lo que se puede medir desde aquí: cifras con su comprobación al lado */
.medidas{margin:3.4rem 0 0}
.medidas .rotulo{display:block;font-size:var(--t-rotulo);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.4rem}
.medidas ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:2rem;max-width:960px}
.medidas b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(2rem,3vw,2.6rem);letter-spacing:-.03em;line-height:1}
.medidas span{display:block;margin-top:.5rem;font-size:var(--t-apoyo);color:var(--ink-2)}
.medidas small{display:block;margin-top:1rem;font-size:var(--t-rotulo);color:var(--ink-3)}
.medidas small a{color:inherit}
.medidas .vacio{font-size:var(--t-cuerpo);color:var(--ink-2);max-width:56ch}

/* LAS LÁMINAS, cada una junto al bloque que prueba y a su proporción (Fran, 20 sep: «estamos documentando proyectos»).
   · natural   una imagen a su tamaño, hasta 560 px de ancho
   · ancha     una imagen de información (un diagrama, un tablero): a todo el ancho de lectura, hasta 960 px
   · par       dos retratos lado a lado
   · portada   la imagen del cuerpo, bajo el lede, ancha
   · recorte   un marco con proporción propia (`aspect-ratio` en línea) que recorta a propósito, con `object-position`
   Nada se estira: sin recorte la imagen manda su alto; con recorte, `cover` sobre el marco declarado. A color siempre. */
.placa{margin:2rem 0 0;max-width:560px}
.placa.ancha,.placa.portada{max-width:960px}
.placa.portada{margin-top:2.6rem}
.placa.recorte{max-width:560px}
/* una pantalla de teléfono sola, al ancho de un teléfono (Fran, 5 oct: «esa imagen de SDE no debería ser tan grande, la estás pixelando»): el fichero mide 440 y la placa natural la llevaba a 560 */
.placa.telefono{max-width:320px}
.placas-par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;max-width:760px;margin-top:2rem;align-items:start}
.placas-par .placa{margin:0;max-width:none}
.placa .marco-img{overflow:hidden;border:1px solid var(--line);border-radius:2px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.placa .marco-img img{display:block;width:100%;height:auto}
.placa.recorte .marco-img img{height:100%;object-fit:cover}
.placa figcaption{margin-top:.7rem;font-size:var(--t-apoyo);line-height:1.45;color:var(--ink-2);max-width:60ch}
/* el botón del mundo vivo, en la llegada: la misma línea que el CTA de Rigel (recuadro, versalitas) */
.boton-vivo{display:inline-flex;flex-direction:column;gap:.15rem;margin-top:1.4rem;padding:.75rem 1.2rem;border:1px solid var(--ink-2);border-radius:4px;background:color-mix(in srgb,var(--bg) 62%,transparent);color:var(--ink);text-decoration:none;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:border-color .3s,color .3s}
.boton-vivo small{font-size:var(--t-rotulo);letter-spacing:.04em;text-transform:none;font-weight:400;color:var(--ink-3)}
.boton-vivo:hover{border-color:var(--signal);color:var(--signal)}
/* EL ENLACE VIVO, LEGIBLE EN LOS DOS CIELOS (5 oct, AUDITORIA-LEGIBILIDAD.md, escenario J). En Ouranos --signal es
   #D83A2E: 4,3:1 sobre el negro de la página, y como letra de 11 px no llega a 4,5. El texto pasa a la tinta de la
   página y el rojo se queda en la flecha, que es el acento. La flecha va aparte para poder moverse al pasar el
   cursor o al tocar: hoy sólo avanza un poco; la animación de verdad vendrá después sobre la misma pieza. */
.vivo{display:inline-block;margin-top:2rem;font-size:var(--t-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;transition:color .3s}
.vivo .flecha{display:inline-block;color:var(--signal);transition:transform .3s}
html[data-cielo="ouranos"] .vivo .flecha{color:#ff7a6e}   /* el rojo claro de Betel, como las flechas del home (23 oct) */
.vivo:hover,.vivo:focus-visible{color:var(--ink)}
.vivo:hover .flecha,.vivo:focus-visible .flecha{transform:translateX(.25em)}
@media (prefers-reduced-motion:reduce){.vivo .flecha{transition:none}}

/* el cuadro móvil (351:2): el cuerpo se ve POR SU BORDE, entrando por la derecha, y la rueda pasa de órbita a COLUMNA:
   cuatro fases una debajo de otra, que es como se lee un ciclo en una mano (PLANTILLA-PROYECTO, cabecera). */
@media (max-width:820px){
  /* LA BARRA NO SE MONTA SOBRE LAS FOTOS (5 oct, AUDITORIA-LEGIBILIDAD.md, escenario B). Las fotos de ancho completo
     pasaban por detrás de los botones del marco, que sólo son 62 % opacos, y «MAP» se perdía sobre una foto clara u
     oscura. Es la misma banda que el inicio ya pone en teléfono (html.motor #viaje::before, estilo.css): el color del
     cielo hasta el alto del marco y un fundido de 28 px, sin canto. Va en el ::before del propio marco, el mismo que en el
     inicio hace de asiento y que sin motor se apaga (estilo.css:193): aquí no hay escena, pero sí fotos que sentar. */
  html.hija .marco::before{content:"";display:block;opacity:1;position:absolute;left:0;right:0;top:0;height:calc(var(--marco-alto) + 28px);z-index:-1;pointer-events:none;
    background:linear-gradient(to bottom, var(--bg) var(--marco-alto), transparent calc(var(--marco-alto) + 28px))}
  .placas-par{grid-template-columns:1fr}
  .hija{padding-top:4.2rem}
  .cuerpo{position:absolute;right:-6.5rem;top:17rem;width:13rem}
  .proyecto{overflow:hidden}   /* el cuerpo asoma por el borde sin abrir scroll horizontal */
  .llegada{position:relative;z-index:1}
  .rueda{grid-template-columns:1fr;gap:1.2rem}
  .rueda svg{display:none}
  .rueda ol{position:relative;padding-left:2rem}
  .rueda ol::before{content:"";position:absolute;left:.45rem;top:.6rem;bottom:.6rem;width:1px;background:var(--ink-3);opacity:.6}
  .rueda li{position:relative;margin-bottom:1.4rem}
  .rueda li b{display:block;margin-bottom:.15rem}
  .rueda li::before{content:"";position:absolute;left:-2rem;top:.45rem;width:.9rem;height:.9rem;border-radius:50%;background:#c8c6ff;box-shadow:0 0 8px rgba(200,198,255,.9)}
  html[data-cielo="atlas"] .rueda li::before{background:var(--bg);border:1px solid var(--ink);box-shadow:none}
  html[data-cielo="atlas"] .rueda li:nth-child(1)::before{background:var(--ink)}
  html[data-cielo="atlas"] .rueda li:nth-child(2)::before{background:linear-gradient(90deg,var(--bg) 50%,var(--ink) 50%)}
  html[data-cielo="atlas"] .rueda li:nth-child(4)::before{background:linear-gradient(90deg,var(--ink) 50%,var(--bg) 50%)}
  .ensayo .nota .esc{display:none}
  .ensayo .nota .mov{display:inline}
  .registro-cuerpo dl{grid-template-columns:7rem minmax(0,1fr)}
  .salida{grid-template-columns:1fr}
}

/* el pie común, dentro de la columna de la hija */
.hija .pie{margin-top:clamp(3rem,8vh,6rem);padding-top:2.4rem;border-top:1px solid var(--line)}
.ensayo .pie{grid-template-columns:1fr}
@media (max-width:820px){.hija .pie{grid-template-columns:1fr}}

/* ══ LA CARTA VACÍA (404) ══ 23 sep 2026.
   Fran: «la 404 está incompleta, no tiene footer, no tiene el nav real, debería haber un 404 en español o inglés
   dependiendo de tu selección, esta solución es muy vaga e inconsistente; también necesita mejorar el diseño y
   agregar un gráfico que vaya acorde a la página y la temática del portal». Y después: «la página está muy larga,
   todo debería aparecer en una pantalla; estás sobrellenando, esto no es un proyecto».

   LA REGLA QUE MANDA: cabe en UNA pantalla. Un 404 no se lee, se SALE de él, así que sólo entra lo que sirve para
   salir —las seis puertas— más el contacto en una línea. El pie de tres columnas de una hija (diez enlaces) se
   quitó: existe en las demás páginas porque allí se está leyendo; aquí sobra.

   EL SITIO: aquí cada sección es una estrella, así que pedir una dirección que no existe es apuntar a un punto donde
   no hay nada. El gráfico es eso y sólo eso: una retícula de lámina, las estrellas del campo, y en el centro un
   HUECO de trazos. NO se dibuja Orión: la constelación está reservada para Rigel (decisión (b), 13 sep).

   EL IDIOMA: Cloudflare sirve UN solo /404.html para todo el dominio, así que la página lleva los dos idiomas dentro
   y enseña uno. Lo decide `lang` en el <html>, que el script pone leyendo la ruta pedida: /es/… sale en español. Se
   resuelve con CSS y no con JS para que no parpadee. */
html[lang="en"] [data-es],
html[lang="es"] [data-en]{display:none}

/* UNA PANTALLA, Y AQUI ESTA EL TRUCO QUE COSTO ENCONTRAR: la clase `hija` va tambien en el <html>, asi que
   el DOCUMENTO entero hereda el padding de una pagina de lectura —91,6 px arriba y 54 abajo— y el alto acababa
   siendo 100svh + 146. Se neutraliza solo aqui (`carta404`) y el padding pasa a la carta, que asi mide 100svh
   exactos contando su propio relleno. */
html.carta404{padding:0}
.carta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;
  column-gap:clamp(1.6rem,4vw,4rem);min-height:100svh;box-sizing:border-box;
  padding:calc(4.6rem + 2vh) var(--pad) clamp(1.2rem,3vh,2.2rem)}
.carta .vuelta{margin-bottom:.9rem}
/* el titular de una hija es de lectura larga; aqui es un rotulo y cabe mas pequeno */
.carta .titular{font-size:clamp(1.85rem,3.2vw,2.7rem);line-height:1.08}
.carta .titular{margin:.3rem 0 0}
.carta-linea{color:var(--ink-2);font-size:var(--t-cuerpo);margin:.8rem 0 1.1rem;max-width:34ch}

/* LAS SEIS PUERTAS. No es una lista de enlaces: es la misma regla que el menú del viaje —el nombre de la sección
   arriba y el de la estrella debajo—, porque son las mismas seis puertas y el visitante ya las vio así. */
.puertas{list-style:none;margin:0;padding:0;display:grid;gap:.15rem .6rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.puertas a{display:block;padding:.35rem .7rem .4rem;margin-left:-.7rem;border-radius:9px;text-decoration:none;
  transition:background .25s}
.puertas a:hover,.puertas a:focus-visible{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.puertas b{display:block;color:var(--ink);font-weight:500;font-size:.92rem;line-height:1.25}
.puertas span{display:block;color:var(--ink-3);font-size:var(--t-rotulo);letter-spacing:.06em}

.carta-pie{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:1.2rem 0 0;font-size:var(--t-apoyo)}
.carta-pie a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid transparent}
.carta-pie a:hover,.carta-pie a:focus-visible{color:var(--ink);border-bottom-color:var(--line)}

/* EL CAMPO VACÍO. Mismos colores que el cielo que esté puesto: la misma figura sirve en Ouranos y en Atlas. */
.campo-vacio{margin:0;grid-column:2;grid-row:1;align-self:center}
.campo-vacio svg{display:block;width:100%;height:auto}
.campo-vacio .reticula path{fill:none;stroke:var(--line);stroke-width:1.2}
.campo-vacio .estrellas circle{fill:var(--ink-3)}
.campo-vacio .estrellas circle:nth-child(3n){fill:var(--ink-2)}
.campo-vacio .hueco circle{fill:none;stroke:var(--signal);stroke-width:1.6;stroke-dasharray:5 5}
.campo-vacio .hueco path{stroke:var(--signal);stroke-width:1.4;opacity:.7}

.carta .sello{grid-column:1/-1;margin:0}

@media (max-width:820px){
  .carta{grid-template-columns:1fr;min-height:100svh;padding:calc(4.2rem + 1vh) var(--pad) 1.2rem}
  .carta .titular{font-size:clamp(1.6rem,7vw,2rem)}
  .carta .vuelta{margin-bottom:.6rem}
  .carta-texto{order:2}
  .campo-vacio{grid-column:1;grid-row:auto;order:1;margin:0 0 1rem;max-width:14rem}
  .puertas{grid-template-columns:1fr}
  .carta .sello{order:3}
}

/* ── LAS CITAS DEL REGISTRO (30 sep) ────────────────────────────────────────────────────────────────────────────
   La página de Star Drill cuenta el proceso con las palabras que Fran escribió entonces, y en prosa corrida no se
   distinguían de la redacción: la cita perdía lo único que la hace valer, que es ser un registro y no una frase.
   No se inventa una marca nueva: se le da la MISMA que ya usan los ensayos (`.argumento blockquote`, línea 42),
   y un pie con la FECHA, porque una cita sin fecha es una frase y con fecha es evidencia.
   Y cumplen otra función: cuatro bloques de prosa seguidos eran un muro, y estas cuatro citas son los hitos que
   lo parten. */
.bloque-h blockquote{margin:1.4rem 0;padding-left:1.2rem;border-left:2px solid var(--signal);color:var(--ink);
  font-family:var(--display);font-weight:300;font-size:1.12em;line-height:1.4}
.bloque-h blockquote p{margin:0 0 .55rem}
.bloque-h blockquote p:last-of-type{margin-bottom:0}
.bloque-h blockquote cite{display:block;margin-top:.8rem;font-family:var(--body);font-style:normal;font-weight:400;
  font-size:var(--t-rotulo);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}