/* ================================================================
   Quinta Moctezuma · Componentes de Marca  —  logos.css
   FUENTE ÚNICA de todos los logos HTML/CSS del sistema.

   Consumir desde web (junto a fonts.css y tokens.css):
     <link rel="stylesheet" href="../../packages/design-system/logos.css">

   Para contratos autónomos (fuentes base64): copiar el bloque
   "ISOLOGO DOCUMENTO" inline dentro del <style> del archivo.
   ================================================================ */


/* ──────────────────────────────────────────────────────────────
   1. ISOTIPO PILL-NAV  ·  QM + 1008
   Uso: navbar pill flotante en ambas páginas web.
   Tamaño: Q 34px / M 25px / 1008 10px
   Posición: M corrida 2px derecha · 1008 corrido 4px derecha
             · 1008 bajado 8px del QM

   HTML:
   <div class="qm-iso" aria-hidden="true">
     <div class="qm-iso__qm"><span class="q">Q</span><span class="m">M</span></div>
     <div class="qm-iso__num">
       <span class="qm-iso__rule"></span>
       <span class="qm-iso__n">1008</span>
       <span class="qm-iso__rule"></span>
     </div>
   </div>
   ────────────────────────────────────────────────────────────── */

.qm-iso { display: flex; flex-direction: column; align-items: center; color: currentColor; }
.qm-iso__qm { display: flex; align-items: flex-end; }
.qm-iso__qm .q { font-family: var(--qm-font-q); font-size: 34px; line-height: 0.88; }
.qm-iso__qm .m { font-family: var(--qm-font-m); font-size: 25px; line-height: 0.88; margin-left: 2px; }
.qm-iso__num { display: flex; align-items: center; gap: 4px; margin-top: 8px; width: 100%; }
.qm-iso__rule { flex: 1; height: 1px; background: currentColor; opacity: 0.35; }
.qm-iso__n {
  font-family: var(--qm-font-display); font-weight: 700; font-size: 10px;
  letter-spacing: var(--qm-1008-tracking); opacity: 0.6;
  padding-left: var(--qm-1008-tracking); white-space: nowrap;
  flex-shrink: 0; margin-left: 4px;
}


/* ──────────────────────────────────────────────────────────────
   2. ISOLOGO HERO  ·  Quinta / Moctezuma / 1008
   Uso: hero de landing page (animable, responsive).
   Tamaño: Quinta clamp(2.2–3rem) · Moctezuma clamp(3.5–5.5rem)
           · 1008 clamp(1.1–1.4rem)
   Posición: Quinta con margin-bottom calc(0.4em + 5px) para
             separarse de Moctezuma · 1008 con margin-top 1.2em

   HTML:
   <div class="qm-isologo" role="img" aria-label="Quinta Moctezuma · 1008">
     <span class="qm-isologo__quinta">Quinta</span>
     <span class="qm-isologo__moctezuma">Moctezuma</span>
     <div class="qm-isologo__num">
       <span class="qm-isologo__rule"></span>
       <span class="qm-isologo__n">1008</span>
       <span class="qm-isologo__rule"></span>
     </div>
   </div>
   ────────────────────────────────────────────────────────────── */

.qm-isologo { display: flex; flex-direction: column; align-items: center; }
.qm-isologo__quinta {
  font-family: var(--qm-font-q);
  font-size: clamp(2.2rem, 5.5vw, 3rem);
  line-height: 1; letter-spacing: 0.06em;
  margin-bottom: calc(0.4em + 5px);
}
.qm-isologo__moctezuma {
  font-family: var(--qm-font-m);
  font-size: clamp(3.5rem, 8vw, 5.5rem);
  line-height: 1;
}
.qm-isologo__num { display: flex; align-items: center; gap: 12px; margin-top: 1.2em; width: 80%; }
.qm-isologo__rule { flex: 1; height: 1.5px; background: currentColor; opacity: 0.5; }
.qm-isologo__n {
  font-family: var(--qm-font-display); font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: var(--qm-1008-tracking);
  padding-left: var(--qm-1008-tracking); white-space: nowrap;
}


/* ──────────────────────────────────────────────────────────────
   3. ISOLOGO DOCUMENTO (impresión)  ·  para contratos e inscripciones
   Uso: cabecera de documentos legales / contratos.
   Tamaño: Quinta 18px · Moctezuma 54px · 1008 10px
   Posición: Quinta margin-bottom 10px · Moctezuma alineada
             · 1008 bajado 12px con líneas a ambos lados

   NOTA: Los contratos son autónomos (fuentes base64). Copiar
   el siguiente bloque CSS dentro del <style> de cada contrato,
   usando las clases .logo / .logo .quinta / etc. ya existentes.

   HTML (ya existente en contratos):
   <div class="logo">
     <div class="quinta">QUINTA</div>
     <div class="mocte">Moctezuma</div>
     <div class="nro">1008</div>
   </div>

   CSS para contratos (copiar inline):
   .logo { display: inline-flex; flex-direction: column; align-items: flex-start; }
   .logo .quinta { font-family: 'LaLuxes', serif; font-size: 18px; letter-spacing: .06em;
     text-indent: .06em; color: var(--tinta); line-height: 1; margin-bottom: 10px; }
   .logo .mocte { font-family: 'Amoresa', cursive; font-size: 54px; line-height: .8;
     color: var(--tinta); margin-left: -2px; }
   .logo .nro { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px;
     font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 10px;
     letter-spacing: .22em; text-indent: .22em; color: var(--cafe); }
   .logo .nro::before, .logo .nro::after { content: ""; flex: 1; height: 1px;
     background: var(--cafe); opacity: .5; }
   ────────────────────────────────────────────────────────────── */

/* Variante con tokens (para páginas web que consumen tokens.css) */
.qm-doc-logo { display: inline-flex; flex-direction: column; align-items: flex-start; }
.qm-doc-logo__quinta {
  font-family: var(--qm-font-q); font-size: 18px;
  letter-spacing: .06em; text-indent: .06em;
  color: var(--qm-tinta); line-height: 1; margin-bottom: 10px;
}
.qm-doc-logo__moctezuma {
  font-family: var(--qm-font-m); font-size: 54px;
  line-height: .8; color: var(--qm-tinta); margin-left: -2px;
}
.qm-doc-logo__num {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px;
  font-family: var(--qm-font-display); font-weight: 700; font-size: 10px;
  letter-spacing: .22em; text-indent: .22em; color: var(--qm-cafe);
}
.qm-doc-logo__num::before,
.qm-doc-logo__num::after { content: ""; flex: 1; height: 1px; background: var(--qm-cafe); opacity: .5; }