/* CAPUCCI — NAVEGACIÓN DE LA HOME
   ==================================================================
   La home tiene DOS CABECERAS VISUALES —la de la obertura, dentro del
   escenario oscuro, y la impresa del Documento Marfil 01— y UNA SOLA
   ARQUITECTURA DE NAVEGACIÓN. Los mismos destinos, el mismo reparto por
   pantalla, y un solo disparador que abre una sola hoja.

   En pantalla ancha: Comprar · Vender · Hernán Capucci · Menú.
   En pantalla angosta: sólo Menú.

   El corte de la navegación es de ANCHO —960 px—, no de relación. La
   relación sigue gobernando la composición de la obertura, que es para lo
   que sirve; decidir con ella cuántos destinos caben hacía que una pantalla
   más ancha mostrara menos.

   Este archivo NO toca la composición congelada. Su única intervención sobre
   el canon es la que la decisión autorizó: que «Menú» aparezca también en
   pantalla ancha, y que los destinos sean destinos de verdad.
   ================================================================== */

/* ------------------------------------------------------------------
   1 · LOS DOS DISPARADORES

   Un <button> y un <span> no se parecen sin ayuda: el navegador le pone al
   botón su tipografía, su fondo, su borde y su caja. Acá se los saca todos
   para que el disparador sea EXACTAMENTE el rótulo que el canon congeló.
   No se agrega ni un gesto: ni subrayado, ni fondo, ni flecha, ni ícono.
   ------------------------------------------------------------------ */
/* LA OBERTURA. Sus enlaces no tienen una sola regla de autor: los viste
   entorno.js poniendole el cuerpo, la familia, el tracking y el color al
   <nav> padre, y los hijos heredan. Un <button> rompe esa herencia porque el
   navegador le impone su propia tipografia, asi que hay que devolversela
   entera; un <a> solo pierde el color y gana un subrayado. */
.cab__enlace{
  -webkit-appearance:none; appearance:none;
  background:none; border:0; border-radius:0;
  padding:0; margin:0;
  color:inherit; text-align:inherit; text-decoration:none;
}
button.cab__enlace{
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  /* NADA DE `opacity:inherit`. La opacidad del canon —0,85— la lleva el <nav>
     padre y el hijo ya la recibe por estar adentro del grupo. Heredarla otra
     vez la multiplicaria por si misma y el rotulo saldria mas palido que el
     congelado: 0,85 x 0,85. Se midio: daba 28 de diferencia en V-01. */
}

/* EL DOCUMENTO. Aca pasa lo contrario: `.marfil__enl` ya declara familia,
   peso, cuerpo, tracking, caja y color en entorno.css, y esas declaraciones
   le ganan al navegador. Tocarlas seria pisar el canon. Lo unico que sobra
   del <button> es su CAJA —fondo, borde, relleno, alineacion—, y eso es lo
   unico que se saca. El subrayado del <a> ya lo apaga entorno-integracion.css. */
.marfil__enl{
  -webkit-appearance:none; appearance:none;
  background:none; border:0; border-radius:0;
  padding:0; margin:0;
  text-align:inherit;
}

/* «Menú» ya no es el rótulo del papel angosto: ahora acompaña siempre, en
   las dos pantallas. Por eso deja de llamarse `--angosta`, que sería un
   nombre que miente, y los tres destinos conservan su `--ancha`. */
.marfil__enl--menu{ display:block; }

/* ------------------------------------------------------------------
   EL CORTE DE LA NAVEGACIÓN · dos reglas, una arquitectura

   Los destinos son los mismos en las dos cabeceras y salen del mismo lugar.
   Lo que cambia es CUÁNDO colapsan, porque el contexto de cada una es otro.

   LA CABECERA IMPRESA responde al ANCHO disponible: no depende de ninguna
   placa, así que la pregunta correcta es si los destinos entran. El corte
   está en 960 px. Antes colapsaba por relación de pantalla y eso hacía que
   1104 × 900 —981 px de ancho útil— mostrara menos que 1024 × 768, que tiene
   909. Medido, no supuesto.

   LA CABECERA DE LA OBERTURA acompaña a la composición de la obertura, y esa
   regla vive en construir.py porque el reparto se decide al armar el canon de
   ejecución, no acá. La composición vertical dimensiona su navegación como
   fracción del ancho de placa: a 1104 px de pantalla eso da un cuerpo de
   21,8 px, tres veces el de la apaisada, y los cuatro controles dejaban la
   marca y la navegación pegadas —0,0 px de holgura— con 3 px de desborde de
   su propia caja. Antes que tocar cuerpos o espaciados congelados, la
   obertura protege su composición fotográfica y colapsa a «Menú».
   ------------------------------------------------------------------ */
.marfil__enl--ancha{ display:none; }

@media (min-width: 960px){
  /* `inline` y no `block`: es el valor que estos enlaces tenían cuando no
     los gobernaba ninguna regla, y dentro del flex del <nav> da exactamente
     la misma caja. Restituir, no redefinir. */
  .marfil__enl--ancha{ display:inline; }
}

/* ------------------------------------------------------------------
   2 · LA HOJA

   No es un panel, ni un cajón, ni una capa encima de la home: es UNA HOJA
   DE LA MISMA PUBLICACIÓN. Marfil opaco de borde a borde, y la home no se
   ve detrás —ni velada, ni desenfocada, ni oscurecida.

   Su composición es la página entera, repartida en tres zonas que se
   sostienen por el aire entre ellas y no por ninguna caja: la marca arriba,
   el índice en la banda central, y los destinos menores abajo. Esa
   distribución vertical ES la composición, y es lo único que la separa de
   una lista.
   ------------------------------------------------------------------ */
:root{
  --hj-arriba:64px;
  --hj-abajo:64px;
  --hj-marca:20px;
  --hj-bajada:9px;   --hj-bajada-tr:.42em;
  --hj-cerrar:11px;  --hj-cerrar-tr:.26em;
  --hj-destino:44px;
  --hj-entre:26px;
  --hj-menor:13px;
  --hj-entre-menores:2.4em;
}
@media (max-aspect-ratio: 1227/1000){
  :root{
    --hj-arriba:44px;
    --hj-abajo:44px;
    --hj-marca:17px;
    --hj-bajada:8px;   --hj-bajada-tr:.38em;
    --hj-cerrar:10px;  --hj-cerrar-tr:.24em;
    --hj-destino:30px;
    --hj-entre:20px;
    --hj-menor:12px;
    --hj-entre-menores:1.8em;
  }
}

.hoja{
  position:fixed; inset:0; z-index:200;
  background:var(--marfil);          /* opaco. La home no se ve detrás. */
  overflow-y:auto;
  overscroll-behavior:contain;
}
.hoja[hidden]{ display:none; }

.hoja__int{
  box-sizing:border-box;
  width:min(calc(100% - 2*var(--mf-espina)), var(--mf-ancho));
  margin-inline:auto;
  min-height:100vh;
  min-height:100dvh;
  padding-top:var(--hj-arriba);
  padding-bottom:var(--hj-abajo);
  display:grid;
  grid-template-rows:auto 1fr auto;   /* marca · índice · menores */
  align-items:start;
}

/* ---- la marca y su deshacer, en la misma línea ----
   «Cerrar» ocupa exactamente el lugar donde estaba «Menú»: el disparador y
   su deshacer viven en el mismo sitio, y por eso no hace falta explicarlo. */
.hoja__cab{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--c3);
}
.hoja__marca{ margin:0; display:flex; flex-direction:column; align-items:flex-start; }
.hoja__marca-nom{
  font-family:var(--f-display); font-weight:500;
  font-size:var(--hj-marca); letter-spacing:.13em; text-indent:.13em;
  line-height:1; color:var(--tinta);
}
.hoja__marca-baj{
  font-family:var(--f-ui); font-weight:300;
  font-size:var(--hj-bajada); letter-spacing:var(--hj-bajada-tr);
  text-indent:var(--hj-bajada-tr); text-transform:uppercase;
  line-height:1; color:var(--gris); margin-top:.9em;
}
.hoja__cerrar{
  -webkit-appearance:none; appearance:none;
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  font-family:var(--f-ui); font-weight:400;
  font-size:var(--hj-cerrar); letter-spacing:var(--hj-cerrar-tr);
  text-indent:var(--hj-cerrar-tr); text-transform:uppercase;
  line-height:1; color:var(--gris);
  transition:color .18s ease;
}
.hoja__cerrar:hover, .hoja__cerrar:focus-visible{ color:var(--tinta); }

/* ---- el índice ----
   Los tres destinos van en Cormorant, no en Jost: es la letra con la que
   esta publicación dice las cosas, y es lo que impide que la hoja se lea
   como una barra de navegación mudada de sitio. Sin subrayado —ese gesto es
   de CONVERSAR y pertenece sólo a CONVERSAR— y sin filete, sin folio y sin
   síntesis, que son de los Documentos. */
.hoja__indice{
  align-self:center;
  display:grid; justify-items:start; gap:var(--hj-entre);
  padding-block:var(--c5);
}
.hoja__destino{
  font-family:var(--f-display); font-weight:300;
  font-size:var(--hj-destino); line-height:1.05;
  letter-spacing:-.012em; color:var(--tinta);
  text-decoration:none;
  transition:color .18s ease;
}
.hoja__destino:hover, .hoja__destino:focus-visible{ color:var(--pizarra); }

/* ---- los destinos menores ----
   Subordinados sin ser letra chica escondida: Jost, tamaño de lectura, en
   gris, que es el piso de contraste de la casa. No son un pie: son el
   margen inferior del índice, y la hoja termina ahí. */
.hoja__margen{
  align-self:end;
  display:flex; flex-wrap:wrap; gap:.6em var(--hj-entre-menores);
}
.hoja__menor{
  font-family:var(--f-ui); font-weight:400;
  font-size:var(--hj-menor); letter-spacing:.06em; line-height:1.4;
  color:var(--gris); text-decoration:none;
  transition:color .18s ease;
}
.hoja__menor:hover, .hoja__menor:focus-visible{ color:var(--tinta); }

/* Con la hoja abierta la página de atrás no se mueve. */
html.hoja-abierta, html.hoja-abierta body{ overflow:hidden; }

/* El aparecer es funcional, no creativo: sólo evita el corte seco. No hay
   deslizamiento, no hay escala, no hay secuencia. Con movimiento reducido
   no hay ni eso. */
@media (prefers-reduced-motion: no-preference){
  .hoja{ animation:hoja-entra .16s ease-out; }
  @keyframes hoja-entra{ from{ opacity:0 } to{ opacity:1 } }
}
