/* CAPUCCI — HOME EDITORIAL · VARIANTE PENDIENTE DE APROBACION (2026-09-29)
   ------------------------------------------------------------------
   Rama `home-editorial`, sobre B2. `entorno.css` sigue congelado byte a
   byte y `entorno-integracion.css` sigue sin mover un pixel: todo lo que
   esta variante recompone vive aca, en una sola hoja que se puede quitar
   entera para volver a B2.

   UN SOLO DOCUMENTO. La obertura ya habla con una gramatica —espina a la
   izquierda, numero con filete, frase, texto secundario, linea vertical— y
   el papel la retoma en vez de inventar una por pagina:

     · LA ESPINA ES UNA SOLA. En vertical el papel corria 16 px del borde y
       la obertura 24: ahora las dos caen sobre la misma vertical.
     · LA LINEA VERTICAL ES EL PASO DE PAGINA. En la obertura cuelga del
       microcopy y dice "sigue"; en el papel cuelga de cada frase-manifiesto
       y lleva al capitulo siguiente. El blanco entre capitulos deja de ser
       un margen: tiene una frase arriba, una linea en el medio y un rotulo
       abajo, y cada tramo mide lo que mide a proposito.
     · EL FILETE CORTO ES EL CIERRE DE UNA AFIRMACION. El que acompana al
       numero en la obertura subraya aca la constancia de "Ninguna en este
       momento." y abre las dos puertas de CONVERSAR.

   SIN CONTENIDO NUEVO. Ni una palabra, ni un numero, ni una imagen: solo
   posicion, escala, aire y dos tipos de linea.
   ------------------------------------------------------------------ */

:root{
  /* LA FRASE-MANIFIESTO Y EL PASO DE CAPITULO.
       texto  →  aire  →  frase  →  el mismo aire  →  rotulo siguiente
     Un solo aire, igual arriba y abajo de la frase: la frase queda sola y
     equilibrada, y el capitulo siguiente entra en cuanto ella termina, sin
     una segunda pausa. La primera version ponia una linea vertical entre
     dos tramos de aire despues de cada frase; en el telefono era un
     separador por sistema y se fue. */
  --ed-paso:160px;
  --ed-linea:rgba(27,36,48,.32);
  --ed-filete:52px;
}
@media (max-aspect-ratio: 1227/1000){
  :root{
    --mf-espina:6.15vw;   /* = 24 px a 390: la espina de la obertura */
    --ed-paso:112px;
    --ed-filete:40px;
  }
}

/* ---- 01 → 02 · "Publicar es lo ultimo." ---- */
.mf--cierre{ margin-top:var(--ed-paso); }
.marfil__reja{ padding-bottom:0; }
.mf2__int{ padding-top:var(--ed-paso); }

/* ---- 02 → 03 · "La publicacion es una consecuencia..." ----
   El mismo paso que el 01 → 02: la regla es una sola. */
.p2--cierre{ margin-top:var(--ed-paso); }
.mf2__int{ padding-bottom:0; }
.mf3__int{ padding-top:var(--ed-paso); }

/* ---- 03 → 04 · "Propiedades que merecen ser representadas." ----
   LA TESIS DE LA CASA, CITADA. Es la frase que la home anterior usaba de
   entrada: no es un cierre mas, es la afirmacion que explica el capitulo.
   Por eso va entre comillas —en el gris de los rotulos, para que se lean
   como signo y no como texto—, mas grande y en dos renglones en apaisado.
   EL AIRE DEJA DE SER SIMETRICO. Con el mismo paso arriba y abajo la frase
   flotaba a mitad de camino entre dos capitulos. Ahora se acerca a la
   frase que la prepara —es su conclusion— y conserva el paso entero
   hacia el capitulo siguiente. */
:root{ --ed-a-cita:104px; }
@media (max-aspect-ratio: 1227/1000){
  :root{ --ed-a-cita:72px; }
}
.p3--cierre{ margin-top:var(--ed-a-cita); }
.p3--cierre::before{ content:"\201C"; color:var(--gris); }
.p3--cierre::after{ content:"\201D"; color:var(--gris); }
@media (min-aspect-ratio: 1227/1000){
  /* la comilla de apertura cuelga fuera de la espina: el texto sigue
     alineado con todo el documento */
  :root{ --mf3-cierre:60px; }
  .p3--cierre{ max-width:12em; text-indent:-.33em; }
}
.mf3__int{ padding-bottom:0; }
.mf4__int{ padding-top:var(--ed-paso); }

/* ============================================================
   DOCUMENTO MARFIL 03 · LAS TRES IMAGENES EN VERTICAL
   ------------------------------------------------------------
   Una imagen grande y otra miniatura se leian como un error de carga.
   Ahora las tres miden lo mismo de ancho —la columna entera— y conservan
   su proporcion: 4:5, 3:2 y 4:3, todas completas, sin recorte. La
   asimetria pasa a la palabra: ARQUITECTURA y DESARROLLO sobre la espina,
   TERRITORIO contra el margen derecho.
   ============================================================ */
@media (max-aspect-ratio: 1227/1000){
  .p3--rA{ margin-top:72px; }
  .p3--rB{ margin-top:72px; }
  .p3--rC{ margin-top:72px; width:auto; }
  .p3--uA, .p3--uB, .p3--uC{ margin-top:16px; }
  .p3--uB{ text-align:right; }
  .p3--uC{ text-align:left; }
  .p3--t02{ margin-top:88px; }
}

/* ============================================================
   DOCUMENTO MARFIL 04 · EN REPRESENTACION
   ------------------------------------------------------------
   UNA SOLA PIEZA. Rotulo, frase, filete y nota se leen juntos: la
   ausencia ya la dice "Ninguna en este momento.", y no hace falta
   decirla otra vez con cientos de pixeles vacios. La frase conserva su
   cuerpo; lo que se acorta es el recorrido. Despues de la nota, el
   mismo paso que separa a todos los capitulos, y CONVERSAR entra.
   ============================================================ */
.mf4__int{ padding-bottom:0; }
.p4--frase::after{
  content:""; display:block; width:var(--ed-filete); height:1px;
  margin-top:28px; background:var(--ed-linea);
}
.p4--nota{ margin-top:28px; }
@media (max-aspect-ratio: 1227/1000){
  :root{ --mf4-frase:38px; }
  .p4--frase{ margin-top:28px; margin-left:0; max-width:none; line-height:1.08; }
  .p4--frase::after{ margin-top:24px; }
  .p4--nota{ margin-left:0; margin-top:24px; max-width:30ch; }
}

/* ============================================================
   CIERRE · CONVERSAR
   ------------------------------------------------------------
   UN SOLO NUCLEO. "Se empieza hablando." es la proposicion y las dos
   puertas son la respuesta inmediata: van pegadas a ella, y entre si
   mas pegadas todavia, para que se lean como un par.
   UNA SOLA CLASE DE LINEA. La version anterior sumaba renglon, filete y
   subrayado en cada puerta. Queda el subrayado, que es el gesto de
   enlace de la casa y lo unico que la pagina necesita para decir "esto
   se toca". El par se arma por sistema, nunca escalonado: en el telefono
   las dos se apilan sobre la espina; en apaisado comparten el renglon, la
   primera en la espina y la segunda en la columna donde Doc04 dice
   "Ninguna en este momento.", la misma vertical de la pagina.
   LA FIRMA es el ultimo gesto chico, a un tramo corto de las puertas.
   ============================================================ */
:root{
  --cv-frase:72px;
  --cv-accion:30px;
  --cv-arriba:var(--ed-paso);
  --cv-a-frase:40px;
  --cv-a-acciones:56px;
  --cv-entre:22px;
  --cv-firma-sep:104px;
  --cv-firma-abajo:48px;
}
@media (max-aspect-ratio: 1227/1000){
  :root{
    --cv-frase:46px;
    --cv-accion:23px;
    --cv-a-frase:28px;
    --cv-a-acciones:40px;
    --cv-entre:18px;
    --cv-firma-sep:72px;
    --cv-firma-abajo:40px;
  }
}
.conv__int{ padding-bottom:0; }
.cv--frase{ line-height:1.02; max-width:9ch; }

.cv-puertas{ margin-top:var(--cv-a-acciones); }
.cv-puerta{ margin:0; display:flex; }
.cv-puerta--b{ margin-top:var(--cv-entre); }
.cv-puertas .cv--acc{ margin:0; }

@media (min-aspect-ratio: 1227/1000){
  .cv-puertas{ display:grid; grid-template-columns:var(--mf4-izq) 1fr; }
  .cv-puerta--b{ margin-top:0; }
}

.cv-firma{
  width:min(calc(100% - 2*var(--mf-espina)), var(--mf-ancho));
}

/* ============================================================
   OBERTURA · la marca de la cabecera cede la esquina a la de llegada.
   La opacidad la escribe entorno.js en funcion del scroll: sin
   transicion propia, para que no haya animacion despues de soltar.
   ============================================================ */
.cab__marca{ transition:none; }

/* ============================================================
   OBERTURA · EL VELO DE LECTURA
   ------------------------------------------------------------
   Con la cabecera acompanando las cinco estaciones, el texto baja por la
   espina hasta donde las placas ya no son techo oscuro sino vano, cielo
   o ventana. Las referencias resuelven eso con fotografia en penumbra;
   aca no se toca una sola placa: se tiende un velo dentro de cada
   estacion, entre la fotografia y su texto, mas denso arriba y a la
   izquierda —donde vive la espina— y nulo en el foco de la camara.
   Viaja con su estacion en el fundido, asi que nunca se suma al de la
   que se va.
   ============================================================ */
.ent-montaje .est img{ z-index:0; }
.ent-montaje .est__cap{ z-index:2; }
.ent-montaje .est::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,12,15,.42) 0%, rgba(10,12,15,.16) 30%, rgba(10,12,15,0) 52%);
}
@media (max-aspect-ratio: 1227/1000){
  .ent-montaje .est::before{
    background:
      linear-gradient(180deg, rgba(10,12,15,.50) 0%, rgba(10,12,15,.38) 30%, rgba(10,12,15,.18) 48%, rgba(10,12,15,0) 64%),
      linear-gradient(90deg, rgba(10,12,15,.20) 0%, rgba(10,12,15,0) 70%);
  }
}

/* ============================================================
   LA CABECERA DEL PAPEL HABLA CON LA VOZ DE LA OBERTURA
   ------------------------------------------------------------
   En la obertura la marca es Cormorant 500 con la bajada en Jost a .42em,
   que son las proporciones del logotipo. El papel la repetia en Jost: era
   otra marca. Ahora reaparece igual, al mismo cuerpo, sobre la misma espina.
   ============================================================ */
:root{ --mf-cab:24px; --mf-cab-baj:9px; }
.marfil__marca-nom{
  font-family:var(--f-display); font-weight:500;
  letter-spacing:.13em; text-indent:0; line-height:1;
}
.marfil__marca-baj{ text-indent:0; line-height:2.2; margin-top:2px; }

/* ============================================================
   ZOCALO FINAL DE MARCA
   ------------------------------------------------------------
   La ultima voz de la pagina es CAPUCCI. Vuelve la masa oscura de la
   obertura —el mismo #0E1216 del escenario— a todo lo ancho, y adentro
   solo la firma: el dominio con la voz del logotipo (Cormorant 500,
   caja alta, .13em) y debajo, pegado, el descriptor con la de su bajada
   (Jost, .42em): el mismo bloque que la marca de la cabecera, nombre y
   bajada, sin linea entre ellos. Sobre la espina, como todo el documento.
   El credito del estudio es la franja mas baja de la misma superficie:
   gris claro, al cuerpo de siempre, lejos de la firma.
   ============================================================ */
:root{
  --zoc-fondo:#0E1216;
  --zoc-arriba:136px; --zoc-dominio:26px; --zoc-desc:10px; --zoc-baj:12px;
  --zoc-credito-sep:112px; --zoc-credito-abajo:36px;
}
@media (max-aspect-ratio: 1227/1000){
  :root{
    --zoc-arriba:96px; --zoc-dominio:17px; --zoc-desc:9.5px; --zoc-baj:9px;
    --zoc-credito-sep:80px; --zoc-credito-abajo:28px;
  }
}
.zocalo{
  margin-top:var(--ed-paso);
  background:var(--zoc-fondo); color:#F2F0EB;
  padding:var(--zoc-arriba) max(var(--mf-espina), calc((100% - var(--mf-ancho))/2)) 0;
}
.zocalo__firma{
  margin:0; display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--zoc-baj);
}
.zocalo__dominio{
  font-family:var(--f-display); font-weight:500; font-size:var(--zoc-dominio);
  letter-spacing:.13em; text-transform:uppercase; line-height:1; white-space:nowrap;
}
.zocalo__desc{
  font-family:var(--f-ui); font-weight:400; font-size:var(--zoc-desc);
  letter-spacing:.42em; text-transform:uppercase; line-height:1.2;
  color:rgba(242,240,235,.72); white-space:nowrap;
}

.cv-firma{
  width:auto; margin:0;
  background:var(--zoc-fondo); color:rgba(242,240,235,.55);
  padding:var(--zoc-credito-sep) max(var(--mf-espina), calc((100% - var(--mf-ancho))/2))
          calc(var(--zoc-credito-abajo) + env(safe-area-inset-bottom, 0px));
}
.cv-firma a:hover,
.cv-firma a:focus-visible{ color:#F2F0EB; }
.cv-firma a:focus-visible{ outline-color:#F2F0EB; }