/* 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:.7rem;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:.66rem;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:" →"}
html[data-cielo="atlas"] .salida .siguiente{color:var(--signal)}
.salida small{display:block;margin-top:.4rem;font-size:.74rem;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:.66rem;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:.78rem}
.registro-cuerpo .rotulo{display:block;font-size:.66rem;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)}
.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:.66rem;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:.82rem;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:.66rem;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)}
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:clamp(.95rem,1.15vw,1.05rem);line-height:1.5;color:var(--ink)}
.rueda li b{font-weight:500}
.rueda .nota{font-size:.76rem;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:.66rem;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:.86rem;color:var(--ink-2)}
.medidas small{display:block;margin-top:1rem;font-size:.72rem;color:var(--ink-3)}
.medidas small a{color:inherit}
.medidas .vacio{font-size:.95rem;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}
.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:.8rem;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:.66rem;letter-spacing:.04em;text-transform:none;font-weight:400;color:var(--ink-3)}
.boton-vivo:hover{border-color:var(--signal);color:var(--signal)}
.vivo{display:inline-block;margin-top:2rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);text-decoration: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){
  .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}}