/* ============================================================
   PROTOTIPO VISUAL 02 · entorno fotografico · ESCRITORIO
   Laboratorio. No es el sitio. Los tokens y las tipografias son
   los de capucci-sitio, copiados, no enlazados.
   ============================================================ */

@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 600;
  font-display:swap; src:url(tipografias/cormorant-garamond.woff2) format('woff2');
}
@font-face{
  font-family:'Jost'; font-style:normal; font-weight:300 500;
  font-display:swap; src:url(tipografias/jost.woff2) format('woff2');
}

:root{
  color-scheme: light;
  --papel:#F2F0EB; --papel-alt:#EAE7E0;
  --tinta:#1B2430; --pizarra:#33465B; --gris:#63686F; --linea:#D8D3C9;
  --marfil:#F2F0EB;
  --f-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-ui:"Jost", ui-sans-serif, "Avenir Next", system-ui, sans-serif;
  --c2:1rem; --c3:1.5rem; --c4:2.5rem; --c5:4rem;
  --seccion:clamp(5.5rem,11vw,12.5rem);
  --canal:clamp(1.25rem,4.5vw,4.5rem);
  --ancho:1560px; --medida:62ch;

  /* LA PISTA. EXPERIMENTAL, NO APROBADA en ninguna de las dos
     composiciones. La longitud definitiva se decide MIRANDO.
     Apaisado: 16000 px absolutos, ~2600 por estacion mas la cola.
     La fraccion de cola vive en el canon, no aca. */
  --pista:16000px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--f-ui); font-weight:300; line-height:1.6;
}
img{ max-width:100%; display:block; }

.vh{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ============================================================
   EL ENTORNO — camino sin JS y reduced-motion.
   Por defecto NO hay montaje: las cinco estaciones son figuras
   apiladas, en orden, con su frase. Es legible y es digno.
   ============================================================ */

.ent{ background:#0E1216; }
.est{ margin:0; position:relative; }
.est picture{ display:block; }
.est img{ width:100%; height:auto; }
.est__cap{
  padding:var(--c4) var(--canal) var(--c5);
  color:var(--marfil);
}
/* Una caja sin ninguna pieza visible no existe. Vale para la version
   apilada (sin JS y con reduced-motion): las ranuras nuevas nacen
   `hidden` y no deben abrir un hueco donde antes no habia nada. */
.est__cap:empty,
.est__cap:not(:has(> :not([hidden]))){ display:none; }

/* ============================================================
   RANURAS EDITORIALES · forma minima, sin diseno
   Ninguna de estas reglas elige cuerpo, posicion ni tratamiento:
   solo le dan a cada ranura lo justo para poder recibirlos.
   Todo lo visible llega por datos, desde el canon.
   ============================================================ */
.pieza{ margin:0; }
/* `hidden` tiene que ganarle a la clase Y al display en linea que pone
   viste(). Sin esto una pieza marcada como oculta se sigue dibujando:
   paso, y se veia la cabecera en estaciones donde ya no existe. */
.pieza[hidden], .pieza__filete[hidden], .pieza__puntos[hidden]{ display:none !important; }
.pieza__filete{ display:block; flex:none; background:currentColor; }
.pieza__puntos{ display:flex; flex:none; }
.pieza__punto{ display:block; flex:none; background:currentColor; }
.pieza__nav{ display:flex; }
.pieza__sub{ display:block; }

/* La cabecera es una sola fila: marca a la izquierda, enlaces a la derecha.
   Sin fondo, sin blur, sin linea, sin caja — solo el reparto. */
.pieza--cab{ display:flex; align-items:flex-start; justify-content:space-between; }
.cab__marca{ margin:0; }

.frase{
  margin:0; font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.6rem,3.6vw,3rem); line-height:1.24;
  letter-spacing:.005em; color:var(--marfil); max-width:16ch;
  text-wrap:balance;
}

/* La marca, con el mismo dibujo que el sitio */
.marca{ margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:.5em; }
.marca__iso{ width:auto; height:2.2em; flex:none; }
.marca__nom{
  font-family:var(--f-display); font-weight:500; font-size:1.42em;
  letter-spacing:.13em; text-indent:.13em; line-height:1;
}
.marca__desc{
  font-family:var(--f-ui); font-weight:300; font-size:.53em;
  letter-spacing:.42em; text-indent:.42em; text-transform:uppercase;
  line-height:1;
}
.marca--claro{ color:#F4F2ED; }
.marca--claro .marca__desc{ color:rgba(244,242,237,.72); }

/* ============================================================
   EL MONTAJE. Solo cuando entorno.js confirma.
   Pista alta + escenario pegado. Cero secuestro de entrada.
   ============================================================ */

/* VERTICAL: la pista se mide en alturas de pantalla, no en pixeles.
   Un telefono tiene 844 px de alto y una notebook 1080: una pista fija
   en px se siente el doble de larga en el telefono. En vh el gesto
   cuesta lo mismo en los dos. 1750vh ~ 350vh por estacion mas la cola. */
@media (max-aspect-ratio: 1227/1000){
  :root{ --pista:1750vh; }
}

.ent-montaje .ent__pista{ height:calc(100vh + var(--pista)); }

.ent-montaje .ent__fija{
  position:sticky; top:0;
  height:100vh; width:100%;
  overflow:hidden; background:#0E1216;
}

.ent-montaje .est{
  position:absolute; inset:0;
  opacity:0;                 /* el corte es duro: 0 o 1, sin transicion */
  contain:strict;
}
.ent-montaje .est[data-ver]{ opacity:1; }

.ent-montaje .est picture{ display:contents; }
.ent-montaje .est img{
  position:absolute; left:0; top:0;
  width:auto; height:auto; max-width:none;
  transform-origin:0 0;
  will-change:transform;
}

.ent-montaje .est__cap{
  position:absolute; padding:0; margin:0;
  display:flex; align-items:flex-start;
}
.ent-montaje .frase{
  font-size:inherit; max-width:none; margin:0;
}

/* ============================================================
   EL DOCUMENTO
   ============================================================ */

.seccion{
  padding:var(--seccion) var(--canal);
  max-width:var(--ancho); margin-inline:auto;
}
.seccion--alt{ background:var(--papel-alt); max-width:none; }
.seccion--alt > *{ max-width:var(--ancho); margin-inline:auto; }

.rotulo{
  margin:0 0 var(--c3); font-family:var(--f-ui); font-weight:400;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gris);
}
.display{
  margin:0 0 var(--c3); font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.06;
  letter-spacing:-.005em; color:var(--tinta); text-wrap:balance;
}
.guia{
  margin:0 0 var(--c4); font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.25rem,2.4vw,1.8rem); line-height:1.4; color:var(--pizarra);
}
.parrafo{ margin:0 0 var(--c2); max-width:var(--medida); color:var(--tinta); }

/* ============================================================
   PANEL DE LABORATORIO
   ============================================================ */

.lab{
  position:fixed; z-index:90; left:1rem; bottom:1rem;
  display:grid; gap:.5rem; padding:.7rem .9rem;
  background:rgba(14,18,22,.88); color:#F4F2ED; border-radius:2px;
  font-family:var(--f-ui); font-size:.72rem; letter-spacing:.06em;
}
.lab[hidden]{ display:none; }
.lab__r{ width:16rem; vertical-align:middle; }
.lab__o,.lab__g{ font-variant-numeric:tabular-nums; display:block; }
.lab__g{ color:#C9BFA8; }

:focus-visible{ outline:2px solid var(--pizarra); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ============================================================
   DOCUMENTO MARFIL 01 · QUIEN REPRESENTA
   ------------------------------------------------------------
   El papel. Empieza donde termina el sticky de la obertura: no
   hay codigo de transicion porque no hace falta ninguno. Sin
   fundido, sin cortina, sin morph, sin animacion de color.

   TRES TENSIONES en apaisado: izquierda la voz, centro la ranura
   fotografica, derecha la sintesis. En vertical no se apila el
   apaisado: el orden es propio y esta escrito en el DOM.

   LAS DOS CUENTAS QUE FIJARON LA RETICULA, para que no se toquen
   sin rehacerlas:

   1 · Los porcentajes de columna son del ANCHO UTIL (entre
       margenes), no del viewport. Con la espina de la casa
       (8,89 vw a cada lado) las tres tensiones en porcentaje de
       viewport no entran: 8,89 + 56 + 22 + margen derecho ya pasa
       de 100 antes de la tercera columna. Del ancho util entran.

   2 · Dentro de las bandas dadas (izquierda 54-58, ranura 20-24)
       se eligio el extremo bajo: 54 / 20 con canales de 5, que deja
       16 % para la sintesis. La cuenta que manda es el apaisado mas
       angosto, 1024: "REPRESENTACION" mide 106,5 px pintados, y la
       columna derecha da 134,7 px con 54/20 contra 117,9 px con
       56/22. Las dos entran; 54/20 deja 28 px de aire y 56/22 deja
       11. Once pixeles no son un margen: son un accidente que
       espera. Si alguna vez se quiere la ranura mas ancha, hay que
       volver a medir esa palabra, no suponerla.
   ============================================================ */

:root{
  /* La espina del documento. A 1440x900 cae en el mismo pixel que
     la espina de la obertura (placa u 0,13 = 128 px). Mas ancho o
     mas angosto dejan de coincidir, y tienen que dejar de hacerlo:
     la obertura vive en coordenadas de PLACA y el papel no tiene
     placa. La coincidencia es del viewport de referencia. */
  --mf-espina:8.89vw;
  --mf-ancho:1560px;

  --mf-rotulo:10.5px;  --mf-rotulo-tr:.26em;
  --mf-titulo:70px;
  --mf-sub:21px;
  --mf-apoyo:16.5px;
  --mf-cuerpo:19px;
  --mf-cierre:45px;
  --mf-medida:23.4em;
  --mf-sint:9.5px;     --mf-sint-tr:.22em;

  /* La cabecera del papel es la MISMA que la de la obertura, en
     pixeles pintados: 12,2 / 8,3 / 10,2 a 1440x900 en apaisado y
     a 430x932 en vertical. No se reescala: reaparece igual. */
  --mf-cab:12.2px; --mf-cab-baj:8.3px; --mf-cab-nav:10.2px;

  /* aires */
  --mf-a-titulo:30px; --mf-a-cred:24px; --mf-a-apoyo:9px;
  --mf-a-t01:90px;    --mf-a-t02:34px;  --mf-a-cierre:100px;
  --mf-arriba:158px;  --mf-abajo:200px; --mf-a-cab:40px;
}

@media (max-aspect-ratio: 1227/1000){
  :root{
    /* espina vertical congelada: 4,00 % del viewport */
    --mf-espina:4.00vw;
    /* tope de medida. Una ventana ancha y baja cae en composicion
       vertical por relacion, no por ancho: sin tope, el cuerpo se
       estiraria a 95 caracteres. El tope solo actua ahi. */
    --mf-ancho:34rem;

    --mf-rotulo:10px; --mf-rotulo-tr:.24em;
    --mf-titulo:44px;
    --mf-sub:19px;
    --mf-apoyo:15.5px;
    --mf-cuerpo:18px;
    --mf-cierre:34px;

    --mf-a-titulo:20px; --mf-a-cred:18px; --mf-a-apoyo:8px;
    --mf-a-t01:54px;    --mf-a-t02:54px;  --mf-a-cierre:72px;
    --mf-arriba:92px;   --mf-abajo:120px; --mf-a-cab:28px;
  }
}

.marfil{ background:var(--marfil); color:var(--tinta); }
.marfil__int{
  width:min(calc(100% - 2*var(--mf-espina)), var(--mf-ancho));
  margin-inline:auto;
}

/* ---- cabecera: impresa sobre el papel ----
   Sin fondo, sin blur, sin linea, sin caja. Esta en el flujo, no
   flotando: un papel no lleva la cabecera pegada al vidrio. */
.marfil__cab{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--c3); padding-top:var(--mf-a-cab);
}
.marfil__marca{ margin:0; }
.marfil__marca-nom,
.marfil__marca-baj{ display:block; font-family:var(--f-ui); font-weight:400; text-transform:uppercase; }
.marfil__marca-nom{
  font-size:var(--mf-cab); letter-spacing:.30em; text-indent:.30em;
  line-height:1; color:var(--tinta);
}
.marfil__marca-baj{
  font-size:var(--mf-cab-baj); letter-spacing:.42em; text-indent:.42em;
  line-height:1.9; color:var(--pizarra);
}
.marfil__nav{ display:flex; gap:2.6em; font-size:var(--mf-cab-nav); }
.marfil__enl{
  font-family:var(--f-ui); font-weight:400; font-size:1em;
  letter-spacing:.26em; text-indent:.26em; text-transform:uppercase;
  line-height:1; color:var(--pizarra); white-space:nowrap;
}
/* A 430 px la marca y los tres enlaces suman mas que el ancho util:
   el papel angosto lleva el mismo "Menu" que ya lleva la obertura
   vertical. No es una decision nueva; es la de la casa. */
.marfil__enl--angosta{ display:none; }
@media (max-aspect-ratio: 1227/1000){
  .marfil__enl--ancha{ display:none; }
  .marfil__enl--angosta{ display:block; }
}

/* ---- la reticula ---- */
.marfil__reja{
  display:grid;
  grid-template-columns:54% 20% 1fr;
  column-gap:5%;
  row-gap:0;
  align-items:start;
  padding-top:var(--mf-arriba);
  padding-bottom:var(--mf-abajo);
}
.mf{ margin:0; }
.mf--rotulo{ grid-column:1; grid-row:1; }
.mf--titulo{ grid-column:1; grid-row:2; margin-top:var(--mf-a-titulo); }
.mf--cred  { grid-column:1; grid-row:3; margin-top:var(--mf-a-cred); }
.mf--t01   { grid-column:1; grid-row:4; margin-top:var(--mf-a-t01); }
.mf--ranura{ grid-column:2; grid-row:4 / span 3; margin-top:var(--mf-a-t01); }
.mf--sint  { grid-column:3; grid-row:1 / span 6; }
.mf--t02   { grid-column:1; grid-row:5; margin-top:var(--mf-a-t02); }
.mf--cierre{ grid-column:1; grid-row:6; margin-top:var(--mf-a-cierre); }

/* ---- la voz ---- */
.mf--rotulo{
  font-family:var(--f-ui); font-weight:400; font-size:var(--mf-rotulo);
  letter-spacing:var(--mf-rotulo-tr); text-indent:var(--mf-rotulo-tr);
  text-transform:uppercase; line-height:1.2; color:var(--gris);
}
.mf--titulo{
  font-family:var(--f-display); font-weight:300; font-size:var(--mf-titulo);
  letter-spacing:-.005em; line-height:1.02; color:var(--tinta);
  text-wrap:balance;
}
.mf__sub{
  margin:0; font-family:var(--f-display); font-weight:300;
  font-size:var(--mf-sub); line-height:1.35; color:var(--pizarra);
}
.mf__apoyo{
  /* Dato de contexto, no claim: tiene que quedar por debajo del
     subtitulo serif. Baja por cuerpo y por TRAZO — Jost 300 en vez
     de 400 — y no por color. El gris #63686F ya esta en 4,93:1
     sobre el marfil, que es el piso de AA: cualquier tono mas
     suave deja de leerse. El peso visual se baja donde se puede. */
  margin:var(--mf-a-apoyo) 0 0; font-family:var(--f-ui); font-weight:300;
  font-size:var(--mf-apoyo); line-height:1.45; color:var(--gris);
}
.mf--t01, .mf--t02{
  font-family:var(--f-display); font-weight:400; font-size:var(--mf-cuerpo);
  line-height:1.4; color:var(--pizarra);
  /* LA MEDIDA, no la columna. La columna de la voz es 54 % y ahi
     vive tambien el titulo, que la ocupa entera. El cuerpo no.
     Cormorant no mide lo que mide Jost: la misma caja da mas
     caracteres, asi que el tope se recalculo contra la fuente
     nueva, no se heredo. Medido, no supuesto. */
  max-width:var(--mf-medida);
}
.mf--cierre{
  font-family:var(--f-display); font-weight:300; font-size:var(--mf-cierre);
  line-height:1.1; letter-spacing:-.005em; color:var(--tinta);
}

/* ---- la ranura fotografica ----
   RESERVA DESNUDA. Sin borde, sin fondo, sin etiqueta, sin marco:
   nada que al llegar la fotografia la haga leer como una card.
   Hoy no se ve; sigue ocupando su sitio para que cuando entre la
   imagen no se mueva una sola pieza del bloque. */
.mf--ranura{ align-self:start; }
.ranura__marco{ aspect-ratio:2 / 3; }
.ranura__marco > img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- la sintesis ---- */
.mf--sint{ align-self:start; }
.sint__folio{
  margin:0; font-family:var(--f-ui); font-weight:400; font-size:var(--mf-sint);
  letter-spacing:var(--mf-sint-tr); text-indent:var(--mf-sint-tr);
  line-height:1.2; color:var(--tinta); font-variant-numeric:tabular-nums;
}
.sint__lista{
  margin:22px 0 0; padding:0; list-style:none;
  display:grid; gap:14px;
}
.sint__lista li{
  font-family:var(--f-ui); font-weight:400; font-size:var(--mf-sint);
  letter-spacing:var(--mf-sint-tr); text-indent:var(--mf-sint-tr);
  text-transform:uppercase; line-height:1.2; color:var(--gris);
  white-space:nowrap;
}

/* ---- vertical: no es el apaisado apilado ----
   El orden del DOM YA es el orden vertical pedido, asi que aca no
   se reordena nada: se apaga la reticula y se deja caer. */
@media (max-aspect-ratio: 1227/1000){
  .marfil__reja{ display:block; }
  .mf--ranura{ margin-top:var(--mf-a-t01); }
  .mf--sint{ margin-top:var(--mf-a-t01); }
  .sint__lista{ display:flex; flex-wrap:wrap; gap:0 1.6em; margin-top:16px; }
}

/* ============================================================
   DOCUMENTO MARFIL 02 · COMO TRABAJA
   ------------------------------------------------------------
   Otra pagina del mismo libro. Comparte el papel, la espina y la
   medida de lectura de la casa; NO comparte composicion con el
   Documento 01 y no hereda una sola de sus clases, para que
   tocar uno no mueva el otro.

   EN QUE SE DIFERENCIA, a proposito:
     · 01 es una voz larga a la izquierda con una franja vertical
       al centro; 02 es una banda superior de tres tensiones mas
       una banda inferior que cierra a todo lo ancho.
     · 01 alinea la columna marginal con el rotulo; 02 alinea la
       fotografia y los verbos con la LINEA DE MAYUSCULAS del
       titulo, y deja el rotulo solo arriba, sobre la espina.
     · 01 baja del rotulo al cierre sin salirse de la espina; 02
       sale de la espina en la banda inferior —el texto 02 entra
       bajo la fotografia— y vuelve a la espina para el cierre.
     · 01 lleva foto vertical 2:3; 02 la lleva horizontal 3:2, su
       transpuesta exacta. Misma proporcion, girada.

   LA CUENTA QUE FIJO LA COLUMNA IZQUIERDA. No la fijo el gusto:
   la fijo la palabra mas ancha del titulo. Medido en Cormorant
   300 a 64 px, "No empieza" mide 304,2 px y "publicando." 296,9 —
   manda la primera, que es la que uno no mira. En el apaisado mas
   angosto (1024, ancho util 841,92) eso descarta cualquier
   columna por debajo del 37 %. Con 40 % quedan 336,8 px y 32,6 de
   aire; con 34 % no entra y el titulo se parte solo.
   ============================================================ */

:root{
  --mf2-rotulo:10.5px;  --mf2-rotulo-tr:.26em;
  --mf2-titulo:64px;
  --mf2-cuerpo:19px;
  --mf2-verbo:9.5px;    --mf2-verbo-tr:.22em;
  --mf2-cierre:32px;

  /* aires */
  --mf2-a-titulo:30px;  --mf2-a-t01:56px;
  --mf2-a-banda:120px;  --mf2-a-cierre:80px;
  --mf2-a-verbo:34px;
  --mf2-arriba:200px;   --mf2-abajo:200px;

  /* Correccion optica del arranque de la banda superior. La caja
     del titulo empieza antes que su tinta: si la fotografia se
     alinea con la CAJA, queda visiblemente alta. Este valor es la
     distancia MEDIDA SOBRE LA TINTA —no sobre la caja de linea,
     que en Cormorant empieza 6 px mas arriba todavia— entre el
     borde de la caja del titulo y el primer pixel de la 'N' de
     'No empieza'. Baja la foto y los verbos hasta esa linea. */
  --mf2-optica:12.9px;
}

@media (max-aspect-ratio: 1227/1000){
  :root{
    --mf2-rotulo:10px;  --mf2-rotulo-tr:.24em;
    --mf2-titulo:42px;
    --mf2-cuerpo:18px;
    --mf2-verbo:10.5px;
    --mf2-cierre:30px;

    --mf2-a-titulo:20px; --mf2-a-t01:46px;
    --mf2-a-banda:56px;  --mf2-a-cierre:66px;
    --mf2-a-verbo:40px;
    --mf2-arriba:150px;  --mf2-abajo:130px;
    --mf2-optica:0px;
  }
}

.mf2{ background:var(--marfil); color:var(--tinta); }
.mf2__int{
  width:min(calc(100% - 2*var(--mf-espina)), var(--mf-ancho));
  margin-inline:auto;
  padding-top:var(--mf2-arriba); padding-bottom:var(--mf2-abajo);
}

/* ---- la reticula: banda de tres tensiones + banda de cierre ---- */
.mf2__reja{
  display:grid;
  grid-template-columns:40% 38% 1fr;   /* 1fr = 12 %, con canales de 5 */
  column-gap:5%;
  row-gap:0;
  align-items:start;
}
.p2{ margin:0; }
.p2--rotulo{ grid-column:1; grid-row:1; }
.p2--titulo{ grid-column:1; grid-row:2; margin-top:var(--mf2-a-titulo); }
.p2--t01   { grid-column:1; grid-row:3; margin-top:var(--mf2-a-t01); }
.p2--ranura{ grid-column:2; grid-row:2 / span 2;
             margin-top:calc(var(--mf2-a-titulo) + var(--mf2-optica)); }
.p2--verbos{ grid-column:3; grid-row:2 / span 2;
             margin-top:calc(var(--mf2-a-titulo) + var(--mf2-optica)); }
/* La banda inferior sale de la espina: el texto 02 entra bajo la
   fotografia, y el cierre vuelve al margen a todo lo ancho. */
.p2--t02   { grid-column:2; grid-row:4; margin-top:var(--mf2-a-banda); }
.p2--cierre{ grid-column:1 / -1; grid-row:5; margin-top:var(--mf2-a-cierre); }

/* ---- la voz ---- */
.p2--rotulo{
  font-family:var(--f-ui); font-weight:400; font-size:var(--mf2-rotulo);
  letter-spacing:var(--mf2-rotulo-tr); text-indent:var(--mf2-rotulo-tr);
  text-transform:uppercase; line-height:1.2; color:var(--gris);
}
.p2--titulo{
  font-family:var(--f-display); font-weight:300; font-size:var(--mf2-titulo);
  letter-spacing:-.005em; line-height:1.02; color:var(--tinta);
}
.p2--t01, .p2--t02{
  font-family:var(--f-display); font-weight:400; font-size:var(--mf2-cuerpo);
  line-height:1.4; color:var(--pizarra);
  max-width:var(--mf-medida);   /* la medida de lectura es de la casa */
  text-wrap:pretty;             /* sin viudas de una palabra a 390 */
}
.p2--cierre{
  font-family:var(--f-display); font-weight:300; font-size:var(--mf2-cierre);
  line-height:1.2; letter-spacing:-.005em; color:var(--tinta);
  /* En apaisado entra en UNA linea (681,5 px). Solo se parte en
     vertical, y ahi conviene que las dos lineas pesen parecido en
     vez de una corta sobre una larga. */
  text-wrap:balance;
}

/* ---- la ranura horizontal ----
   RESERVA. Todavia no hay asset. Placeholder tecnico: un plano de
   marfil apagado y nada mas. Sin filete, sin etiqueta, sin marco,
   sin radio. Cuando llegue la fotografia entra como <img> aca
   adentro y el plano desaparece, igual que en el Documento 01. */
.ranura2{ aspect-ratio:3 / 2; background:var(--papel-alt); }
.ranura2 > img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- los cuatro verbos ----
   No son un proceso: son cuatro palabras. Sin numero, sin vineta,
   sin icono, sin flecha, sin linea que las encadene. Lo unico que
   las separa es aire, y cada una tiene el suyo. */
.p2--verbos{ list-style:none; padding:0; display:grid; gap:var(--mf2-a-verbo); }
.p2--verbos li{
  font-family:var(--f-ui); font-weight:400; font-size:var(--mf2-verbo);
  letter-spacing:var(--mf2-verbo-tr); text-indent:var(--mf2-verbo-tr);
  text-transform:uppercase; line-height:1.2; color:var(--tinta);
  white-space:nowrap;
}

/* ---- vertical: el orden del DOM ya es el orden pedido ---- */
@media (max-aspect-ratio: 1227/1000){
  .mf2__reja{ display:block; }
  .p2--ranura{ margin-top:var(--mf2-a-t01); }
  .p2--verbos{ margin-top:var(--mf2-a-t01); }
  .p2--t02{ margin-top:var(--mf2-a-banda); }
}

/* ============================================================
   DOCUMENTO MARFIL 03 · QUE REPRESENTA
   ------------------------------------------------------------
   Composicion editorial LIBRE sobre una reticula MEDIBLE: doce
   columnas con canal del 2 % del ancho util, y cada pieza puesta
   a mano sobre esa reticula. No hay estructura de columnas: hay
   piezas colocadas. Nada se hereda del 01 ni del 02.

   EL ZIGZAG DESCENDENTE. Las tres imagenes no forman grilla ni
   comparten alto: A arriba a la derecha (4:5, la mas alta), B al
   medio a la izquierda (3:2), C abajo al centro (1:1, la mas
   chica). A 1440 miden 473,5 / 386,7 / 278,3 de alto. La voz
   entra por la espina, el centro de la pagina divaga, y el cierre
   vuelve a la espina.

   LAS TRES PALABRAS, tres relaciones distintas con su imagen,
   para que ninguna se lea como epigrafe:
     ARQUITECTURA  ENCIMA de A, sobre su mismo borde izquierdo y
                   a la altura de la tinta del titulo.
     TERRITORIO    A LA DERECHA de B, a la altura de su canto alto.
     DESARROLLO    A LA IZQUIERDA de C, a la altura de su canto bajo.

   LAS RESERVAS NO SE VEN. La especificacion prohibe borde, fondo,
   sombra y etiqueta: una reserva que cumple las cuatro cosas es
   invisible, y asi queda. Solo guardan su sitio para que la
   fotografia entre sin mover nada, como paso en el 01 y el 02.
   ============================================================ */

:root{
  --mf3-rotulo:10.5px;  --mf3-rotulo-tr:.26em;
  --mf3-titulo:62px;
  --mf3-cuerpo:19px;
  --mf3-universo:9.5px; --mf3-universo-tr:.22em;
  --mf3-frase:24px;
  --mf3-cierre:46px;

  --mf3-canal:2%;
  --mf3-optica:12.5px;      /* tinta del titulo a 62 px */

  /* aires. LA ENTRADA ES LENTA, y eso resuelve el pasaje 02 -> 03
     sin un solo recurso grafico: hay MENOS marfil que en el paso
     01 -> 02 antes del rotulo, y MUCHO MAS entre el rotulo y el
     titulo. El lector llega antes a la etiqueta y espera mas por
     la frase. Otra separacion, no la misma mas grande. */
  --mf3-arriba:120px;   --mf3-a-titulo:96px;
  --mf3-a-t01:64px;     --mf3-a-palabra:26px;
  --mf3-a-b:170px;      --mf3-a-t02:420px;
  --mf3-a-c:150px;      --mf3-a-frase:170px;
  --mf3-a-cierre:190px; --mf3-abajo:230px;
}

@media (max-aspect-ratio: 1227/1000){
  :root{
    --mf3-rotulo:10px;  --mf3-rotulo-tr:.24em;
    --mf3-titulo:42px;
    --mf3-cuerpo:18px;
    --mf3-universo:10px;
    --mf3-frase:22px;
    --mf3-cierre:36px;
    --mf3-optica:0px;

    --mf3-arriba:96px;   --mf3-a-titulo:56px;
    --mf3-a-t01:44px;
    --mf3-abajo:140px;
  }
}

.mf3{ background:var(--marfil); color:var(--tinta); }
.mf3__int{
  width:min(calc(100% - 2*var(--mf-espina)), var(--mf-ancho));
  margin-inline:auto;
  padding-top:var(--mf3-arriba); padding-bottom:var(--mf3-abajo);
}

/* ---- la reticula medible ---- */
.mf3__reja{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  column-gap:var(--mf3-canal);
  row-gap:0;
  align-items:start;
}
.p3{ margin:0; }

.p3--rotulo { grid-column:1 / 9;  grid-row:1; }
.p3--titulo { grid-column:1 / 9;  grid-row:2; margin-top:var(--mf3-a-titulo); }
.p3--t01    { grid-column:1 / 6;  grid-row:3; margin-top:var(--mf3-a-t01); }

/* A · arriba a la derecha. La palabra va ENCIMA de su imagen, sobre
   su mismo borde izquierdo y a 26 px de su canto. Estuvo un rato
   alineada con la tinta del titulo —una linea bonita que cruzaba la
   pagina— y hubo que bajarla: quedaba a 128 px de la imagen, o sea
   flotando, mientras las otras dos palabras tocaban la suya. La
   consigna era que vivieran CERCA de su imagen; gano la consigna. */
.p3--uA     { grid-column:9 / 13; grid-row:3; }
.p3--rA     { grid-column:9 / 13; grid-row:3 / span 2;
              margin-top:calc(var(--mf3-universo)*1.2 + var(--mf3-a-palabra)); }

/* B · al CENTRO-IZQUIERDA, no contra la espina. Arranca en la
   columna 2 y mide cinco: se despego del margen y se angosto. Su
   canto derecho no se movio —sigue en la columna 7— asi que la
   palabra TERRITORIO conserva su canal exacto. */
.p3--rB     { grid-column:2 / 7;  grid-row:5; margin-top:var(--mf3-a-b); }
.p3--uB     { grid-column:7 / 9;  grid-row:5; margin-top:var(--mf3-a-b); }
/* El texto 02 deja de ser un bloque suelto a la derecha. Ahora
   cuelga del canto inferior derecho de B y apunta a C: empieza
   dentro de la banda de B y termina apenas por debajo, en el
   corredor por donde sigue la lectura. Es la bisagra entre las dos
   imagenes, no una tercera cosa flotando. */
.p3--t02    { grid-column:8 / 12; grid-row:5; margin-top:var(--mf3-a-t02); }

/* C · abajo al CENTRO-DERECHA y mas grande. La palabra va A SU
   IZQUIERDA, a la altura de su canto bajo, alineada a la derecha de
   su celda para caer sobre el mismo canal que separa a TERRITORIO
   de su imagen: las tres palabras a la misma distancia. */
.p3--uC     { grid-column:4 / 6;  grid-row:7; align-self:end; text-align:right; }
/* Cinco columnas y 4:3. C era la pieza aislada del centro: chica,
   cuadrada y sin nada cerca. Ahora pesa mas, se corrio a la derecha
   —hacia la zona por donde bajo el texto 02— y dejo de ser un
   cuadrado. Las tres alturas siguen sin igualarse. */
.p3--rC     { grid-column:6 / 11; grid-row:7; margin-top:var(--mf3-a-c); }

/* la frase queda sola, y no sobre la espina */
.p3--frase  { grid-column:3 / 10; grid-row:8; margin-top:var(--mf3-a-frase); }
/* el cierre vuelve a la espina, con mucho marfil alrededor */
.p3--cierre { grid-column:1 / -1; grid-row:9; margin-top:var(--mf3-a-cierre); }

/* ---- la voz ---- */
.p3--rotulo{
  font-family:var(--f-ui); font-weight:400; font-size:var(--mf3-rotulo);
  letter-spacing:var(--mf3-rotulo-tr); text-indent:var(--mf3-rotulo-tr);
  text-transform:uppercase; line-height:1.2; color:var(--gris);
}
.p3--titulo{
  font-family:var(--f-display); font-weight:300; font-size:var(--mf3-titulo);
  letter-spacing:-.005em; line-height:1.02; color:var(--tinta);
}
.p3--t01, .p3--t02{
  font-family:var(--f-display); font-weight:400; font-size:var(--mf3-cuerpo);
  line-height:1.4; color:var(--pizarra); max-width:var(--mf-medida);
  text-wrap:pretty;
}
.p3--frase{
  font-family:var(--f-display); font-weight:300; font-size:var(--mf3-frase);
  line-height:1.45; color:var(--tinta);
  /* Esta frase esta sola en la pagina: no puede quedar con una
     linea larga y una corta. 'pretty' dejaba una huerfana de
     112 px a 1920 y a 1024; 'balance' reparte. */
  text-wrap:balance;
}
.p3--cierre{
  font-family:var(--f-display); font-weight:300; font-size:var(--mf3-cierre);
  letter-spacing:-.005em; line-height:1.15; color:var(--tinta);
  text-wrap:balance;
}
.p3--uA, .p3--uB, .p3--uC{
  font-family:var(--f-ui); font-weight:400; font-size:var(--mf3-universo);
  letter-spacing:var(--mf3-universo-tr); text-indent:var(--mf3-universo-tr);
  text-transform:uppercase; line-height:1.2; color:var(--tinta);
  white-space:nowrap;
}

/* ---- las tres reservas ----
   Sin borde, sin fondo, sin sombra, sin etiqueta: hoy no se ven.
   Solo guardan su sitio y su relacion. Cuando lleguen las
   fotografias entran como <img> y no se mueve nada. */
.ranura3{ display:block; }
.ranura3--a{ aspect-ratio:4 / 5; }
.ranura3--b{ aspect-ratio:3 / 2; }
.ranura3--c{ aspect-ratio:4 / 3; }
.ranura3 > img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- vertical: el orden del DOM ya es el orden pedido ----
   No es una galeria: tres proporciones distintas, un ancho que se
   achica en la ultima, y aires desparejos entre grupo y grupo. */
@media (max-aspect-ratio: 1227/1000){
  .mf3__reja{ display:block; }
  .p3--rA{ margin-top:64px; }
  .p3--uA{ margin-top:24px; }
  .p3--rB{ margin-top:76px; }
  .p3--uB{ margin-top:24px; }
  .p3--rC{ margin-top:88px; width:76%; }
  .p3--uC{ margin-top:24px; }
  .p3--t02{ margin-top:76px; }
  .p3--frase{ margin-top:92px; }
  .p3--cierre{ margin-top:104px; }
}

/* ============================================================
   DOCUMENTO MARFIL 04 · EN REPRESENTACION
   ------------------------------------------------------------
   El estado cero del inventario. No es una pagina vacia
   esperando contenido: es una pagina que DEJA CONSTANCIA de un
   estado real, y eso es lo unico que tiene que hacer.

   NADA SE HEREDA. El 01 era columna mas ranura vertical; el 02,
   columna mas columna de verbos mas foto apaisada; el 03, doce
   columnas con piezas puestas a mano. Este no tiene reticula de
   columnas ni piezas dispersas: tiene DOS POSICIONES y el vacio
   entre ellas.

   LA UNICA TENSION ES HORIZONTAL, y es la pieza entera.
   El rotulo vive en la espina, a la izquierda. La frase vive al
   otro lado de la pagina, a la derecha. Y estan EN LA MISMA
   LINEA DE TINTA: no en la misma caja —las cajas mienten— sino
   con el primer pixel pintado a la misma altura, medido sobre el
   render. Entre la etiqueta y la respuesta hay que cruzar la
   pagina entera, y en el medio no hay nada. Ese nada es el sitio
   donde iria la lista.

   NO SE DIBUJA EL VACIO. Sin marco, sin filete, sin grilla vacia,
   sin contador cero, sin icono, sin 'proximamente'. El vacio esta
   por posicion, que es la unica manera de que sea una decision y
   no una carencia.

   ESTE BLOQUE NO ES EL FINAL. Lo dice con medida, no con un
   recurso: entra con 150 px de aire y sale con 96, y arriba
   carga ademas los 230 px con que cierra el 03. O sea, el aire
   de entrada es casi CUATRO VECES el de salida. Una pagina que
   termina se despide; esta queda abierta hacia abajo.
   ============================================================ */

:root{
  /* El rotulo es el de la casa —10,5 px, .26em, gris—: es la voz
     del libro, no un recurso del 03. Lo unico propio de este
     documento son la frase y su posicion. */
  --mf4-rotulo:10.5px; --mf4-rotulo-tr:.26em;

  /* 40 px. Menos que el titulo del 03 (62) y menos que su cierre
     (45/46): peso suficiente para ser la voz principal de la
     pagina, sin el dramatismo de un titulo de capitulo. Esta
     frase informa, no proclama. */
  --mf4-frase:40px;
  --mf4-nota:17px;

  /* El borde izquierdo de la frase, en fraccion del ancho util.
     No es una columna: es una posicion. */
  --mf4-izq:52%;

  /* Alineacion optica del rotulo con la CAJA ALTA de la frase. Se
     MIDE sobre el render, no se calcula: las dos cajas de linea
     arrancan en el mismo y, 603,27, y aun asi la tinta no coincide
     —la mayuscula de Cormorant a 40 px empieza 9 px mas abajo que
     la del Jost a 10,5. Tampoco sirve el primer pixel pintado: el
     rotulo lo pone la tilde de la O, y alinear una tilde con una N
     no alinea nada. Caja alta contra caja alta: 604,50 y 613,50. */
  --mf4-optica:9px;

  --mf4-arriba:150px; --mf4-a-nota:76px; --mf4-abajo:96px;
}

@media (max-aspect-ratio: 1227/1000){
  :root{
    --mf4-rotulo:10px; --mf4-rotulo-tr:.24em;
    --mf4-frase:30px;
    --mf4-nota:17px;
    --mf4-optica:0px;
    --mf4-arriba:118px; --mf4-a-nota:56px; --mf4-abajo:80px;
    /* En vertical la tension horizontal no cabe. Se transpone:
       el rotulo queda en la espina y la frase entra SANGRADA, con
       un ancho corto que la obliga a quebrar en dos o tres lineas.
       El vacio pasa a ser el aire entre el rotulo y la frase mas
       la sangria. No es una pila: es una sangria con aire. */
    --mf4-sangria:13%;
    --mf4-a-frase-v:104px;
    --mf4-frase-ancho:78%;
  }
}

.mf4{ background:var(--marfil); color:var(--tinta); }
.mf4__int{
  width:min(calc(100% - 2*var(--mf-espina)), var(--mf-ancho));
  margin-inline:auto;
  padding-top:var(--mf4-arriba); padding-bottom:var(--mf4-abajo);
}

/* Dos posiciones, no doce columnas. La primera pista es el vacio
   —ahi no entra nada nunca—, la segunda es donde vive la voz. */
.mf4__reja{
  display:grid;
  grid-template-columns:var(--mf4-izq) 1fr;
  align-items:start;
}
.p4{ margin:0; }

.p4--rotulo{
  grid-column:1; grid-row:1;
  margin-top:var(--mf4-optica);
  font-family:var(--f-ui); font-weight:400; font-size:var(--mf4-rotulo);
  letter-spacing:var(--mf4-rotulo-tr); text-indent:var(--mf4-rotulo-tr);
  text-transform:uppercase; line-height:1.2; color:var(--gris);
}
.p4--frase{
  grid-column:2; grid-row:1;
  font-family:var(--f-display); font-weight:300; font-size:var(--mf4-frase);
  letter-spacing:-.005em; line-height:1.15; color:var(--tinta);
}
/* La nota cuelga de la frase, sobre su mismo borde izquierdo: es
   su explicacion, no una tercera cosa. Subordinada por cuerpo y
   por color, nunca por un gris mas debil que el piso de contraste.
   La medida de lectura es la de la casa. */
.p4--nota{
  grid-column:2; grid-row:2;
  margin-top:var(--mf4-a-nota);
  max-width:var(--mf-medida);
  font-family:var(--f-display); font-weight:400; font-size:var(--mf4-nota);
  line-height:1.55; color:var(--pizarra);
}

@media (max-aspect-ratio: 1227/1000){
  .mf4__reja{ display:block; }
  .p4--rotulo{ margin-top:0; }
  .p4--frase{
    margin-top:var(--mf4-a-frase-v);
    margin-left:var(--mf4-sangria);
    max-width:var(--mf4-frase-ancho);
  }
  .p4--nota{
    margin-left:var(--mf4-sangria);
    max-width:none;
  }
}

/* ============================================================
   CIERRE DE LA HOME · CONVERSAR
   ------------------------------------------------------------
   La ultima pieza. No explica mas a Capucci: convierte todo lo
   leido en una posibilidad de relacion humana. Por eso lo unico
   que hay aca es una frase y dos puertas.

   NO ES UN DOCUMENTO MARFIL. No se llama 05 en ningun lado del
   codigo ni de la composicion, y no hereda nada: ni la columna
   con ranura del 01, ni la columna de verbos del 02, ni la reja
   de doce del 03, ni las dos posiciones del 04. Tampoco hay
   reticula: hay un flujo con sangrias puestas a mano, que es lo
   mas simple que puede sostener esta pieza.

   EL MOVIMIENTO BAJA Y VA A LA DERECHA, Y SE DETIENE. El rotulo
   y la frase entran contra la espina; la primera accion se corre
   al 30 % y la segunda al 55 %. Las dos opciones NO estan una
   debajo de la otra: estan a distinta profundidad y a distinta
   sangria, asi que no se leen como menu sino como dos puertas
   separadas. El ultimo gesto de la pagina es un descenso hacia
   la derecha que termina.

   POR QUE ESTA PAGINA SI CIERRA, y el 04 quedaba abierto:
     · lo ultimo que hay es una ACCION, no una nota subordinada;
     · el aire de salida se duplica, de 96 px a 200;
     · y la relacion entrada/salida se da vuelta: el 04 entraba
       con 380 y salia con 96 —casi cuatro a uno, abierto—; esta
       entra con 286 y sale con 200, que es casi parejo. Una
       pagina que termina se toma el tiempo de terminar.

   LA FRASE MIDE 48. Es la ultima frase grande de la home y tiene
   que sonar inevitable, no dramatica: queda POR ENCIMA de todos
   los cierres de la casa —45 en el 01, 46 en el 03, 40 en el 04—
   y POR DEBAJO de todos los titulos —70 en el 01, 64 en el 02,
   62 en el 03. Nadie le roba el lugar a los titulos y nadie la
   confunde con un cierre de capitulo mas.

   LAS DOS ACCIONES SON TEXTO, NO BOTONES. Sin caja, sin fondo,
   sin borde, sin icono, sin flecha. Son enlaces de verdad y se
   ven clicables por un solo gesto: un subrayado de 1 px separado
   de la linea de base, que al pasar y al enfocar se oscurece. El
   foco visible es el de la casa.
   ============================================================ */

:root{
  --cv-rotulo:10.5px; --cv-rotulo-tr:.26em;
  --cv-frase:48px;
  --cv-accion:22px;

  /* sangrias de las dos puertas, en fraccion del ancho util */
  --cv-sangria-a:30%;
  --cv-sangria-b:55%;

  --cv-arriba:190px;  --cv-a-frase:56px;
  --cv-a-acciones:130px; --cv-entre:52px;
  --cv-abajo:200px;
}

@media (max-aspect-ratio: 1227/1000){
  :root{
    --cv-rotulo:10px; --cv-rotulo-tr:.24em;
    --cv-frase:32px;
    --cv-accion:20px;
    /* En vertical el descenso hacia la derecha no cabe en 395 px
       de ancho util. No se comprime: se rehace. La primera puerta
       queda contra la espina y la segunda entra sangrada, y entre
       las dos hay 68 px, mucho mas de lo que tendria una lista.
       Distinta sangria y aire grande: dos puertas, no un menu. */
    --cv-sangria-a:0%;
    --cv-sangria-b:18%;
    --cv-arriba:140px;  --cv-a-frase:40px;
    --cv-a-acciones:96px; --cv-entre:68px;
    --cv-abajo:150px;
  }
}

.conv{ background:var(--marfil); color:var(--tinta); }
.conv__int{
  width:min(calc(100% - 2*var(--mf-espina)), var(--mf-ancho));
  margin-inline:auto;
  padding-top:var(--cv-arriba); padding-bottom:var(--cv-abajo);
}
.cv{ margin:0; }

.cv--rotulo{
  font-family:var(--f-ui); font-weight:400; font-size:var(--cv-rotulo);
  letter-spacing:var(--cv-rotulo-tr); text-indent:var(--cv-rotulo-tr);
  text-transform:uppercase; line-height:1.2; color:var(--gris);
}
.cv--frase{
  margin-top:var(--cv-a-frase);
  font-family:var(--f-display); font-weight:300; font-size:var(--cv-frase);
  letter-spacing:-.005em; line-height:1.1; color:var(--tinta);
}

/* Las dos puertas. width:max-content para que el subrayado mida
   exactamente el texto y ni un pixel mas: subrayar la caja seria
   dibujar un boton por la puerta de atras. */
.cv--acc{
  display:block; width:max-content; max-width:100%;
  font-family:var(--f-display); font-weight:400; font-size:var(--cv-accion);
  line-height:1.35; color:var(--tinta);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.34em;
  text-decoration-color:var(--gris);
  transition:text-decoration-color .18s ease;
}
.cv--acc:hover,
.cv--acc:focus-visible{ text-decoration-color:var(--tinta); }

.cv--a{ margin-top:var(--cv-a-acciones); margin-left:var(--cv-sangria-a); }
.cv--b{ margin-top:var(--cv-entre);      margin-left:var(--cv-sangria-b); }

@media (prefers-reduced-motion: reduce){
  .cv--acc{ transition:none; }
}