/* CAPUCCI — EL TELEFONO HORIZONTAL · HOME EDITORIAL, PENDIENTE DE APROBACION
   ------------------------------------------------------------------
   Un telefono girado tiene la RELACION del apaisado pero no su ALTURA. Toda
   la home decide por relacion (1,227), asi que un 844 x 390 recibia la
   composicion de escritorio: titulos de 70 px, rejas de tres columnas y una
   navegacion completa en 390 px de alto. Este modo lo trata como lo que es.

   LA CONDICION:  @media (min-aspect-ratio: 1227/1000) and (max-height: 500px)
   Relacion de apaisado y pantalla baja. Un telefono girado mide entre 320 y
   440 de alto; una tableta girada, 700 o mas. La misma condicion, letra por
   letra, elige el canon `horizontal` en entorno.js.

   PRIMERA PARTE · COPIA. El papel del telefono horizontal es el papel del
   telefono vertical: las mismas reglas que las hojas declaran bajo
   `max-aspect-ratio: 1227/1000`, copiadas aca bajo la condicion horizontal
   porque `entorno.css` esta congelado y CSS no deja nombrar una condicion
   dos veces. Quedan afuera las de la obertura, que tiene canon propio.
   pruebas/probar.py verifica que la copia siga igual a su fuente.

   SEGUNDA PARTE · AJUSTES. Lo que el telefono horizontal necesita y el
   vertical no: la espina lejos del notch, las fotos medidas por alto, las
   puertas de CONVERSAR apiladas.
   ------------------------------------------------------------------ */

/* ---- copia de entorno.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  :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;
  }
}

/* ---- copia de entorno.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  .marfil__enl--ancha{ display:none; }
  .marfil__enl--angosta{ display:block; }
}

/* ---- copia de entorno.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  .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; }
}

/* ---- copia de entorno.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  :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;
  }
}

/* ---- copia de entorno.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  .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); }
}

/* ---- copia de entorno.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  :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;
  }
}

/* ---- copia de entorno.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  .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; }
}

/* ---- copia de entorno.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  :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%;
  }
}

/* ---- copia de entorno.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  .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;
  }
}

/* ---- copia de entorno.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  :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;
  }
}

/* ---- copia de entorno-integracion.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  :root{ --cv-firma-sep:64px; --cv-firma-abajo:44px; }
}

/* ---- copia de navegacion.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  :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;
  }
}

/* ---- copia de home-editorial.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  :root{
    --mf-espina:6.15vw;   /* = 24 px a 390: la espina de la obertura */
    --ed-paso:112px;
    --ed-filete:40px;
  }
}

/* ---- copia de home-editorial.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  :root{ --ed-a-cita:72px; }
}

/* ---- copia de home-editorial.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  .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; }
}

/* ---- copia de home-editorial.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  :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; }
}

/* ---- copia de home-editorial.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  :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;
  }
}

/* ---- copia de home-editorial.css ---- */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  :root{
    --zoc-arriba:96px; --zoc-dominio:17px; --zoc-desc:9.5px; --zoc-baj:9px;
    --zoc-credito-sep:80px; --zoc-credito-abajo:28px;
  }
}

/* ==================================================================
   SEGUNDA PARTE · AJUSTES PROPIOS DEL TELEFONO HORIZONTAL
   ================================================================== */
@media (min-aspect-ratio: 1227/1000) and (max-height: 500px){
  :root{
    /* LA ESPINA, LEJOS DEL NOTCH. La misma vertical que la obertura
       horizontal (u 0,09 de una placa que mide el ancho de la pantalla), y
       nunca menos que el area segura mas 20 px: girado, el notch queda a
       un costado y se come hasta 59 px. Sin tope de medida: el ancho es el
       de la pantalla y cada texto conserva su propia medida de lectura. */
    --mf-espina:max(9vw, calc(env(safe-area-inset-left, 0px) + 20px),
                         calc(env(safe-area-inset-right, 0px) + 20px));
    --mf-ancho:100%;
    /* las fotos se miden por ALTO: en 390 px de pantalla una foto medida
       por ancho es una torre o una estampilla */
    --hz-foto:78vh;
  }
  @supports (height: 1svh){ :root{ --hz-foto:78svh; } }

  .mf--ranura{ max-width:calc(var(--hz-foto) * 2 / 3); }
  .p2--ranura{ max-width:calc(var(--hz-foto) * 3 / 2); }
  .p3--rA, .p3--uA{ max-width:calc(var(--hz-foto) * 4 / 5); }
  .p3--rB, .p3--uB{ max-width:calc(var(--hz-foto) * 3 / 2); }
  .p3--rC, .p3--uC{ max-width:calc(var(--hz-foto) * 4 / 3); }

  /* CONVERSAR: las puertas se apilan sobre la espina, como en el telefono
     vertical. */
  .cv-puertas{ display:block; }
  .cv-puerta--b{ margin-top:var(--cv-entre); }

  /* LA CITA: la medida y el aire del telefono vertical, sin colgar la
     comilla (la espina ya esta cerca del borde). */
  :root{ --mf3-cierre:36px; }
  .p3--cierre{ margin-top:var(--ed-a-cita); max-width:none; text-indent:0; }
}