/* ==========================================================================
   TP ATELIER — LOGOTIPO
   Marca 1a: monograma TPA en doble recuadro (bastidor) + wordmark Bodoni.
   Depende de tokens.css. Requiere Bodoni Moda cargada (Google Fonts).

   Origen: ../../marca/logo.css — ese es el kit de marca y vale para todos
   los modelos. Esta copia lleva un arreglo de escalado, marcado abajo.
   ========================================================================== */

/* La medida vive acá arriba para que el monograma y el wordmark la compartan.
   ARREGLO respecto del original: allá --tpa-caja se declaraba sobre
   .tpa-monograma, y como .tpa-nombre es su hermano —no su hijo— nunca la
   veía: un lockup a 112 px quedaba con el nombre en 17 px. Las variables
   CSS bajan por el árbol, no se pasan de costado. */
.tpa-marca{
  --tpa-caja: 34px;
  display:inline-flex; align-items:center; gap:.38em; text-decoration:none;
}

/* Monograma. Sin declaración propia de --tpa-caja: así hereda la del lockup
   cuando está adentro de uno, y cae a 34px cuando va suelto. */
.tpa-monograma{
  width:var(--tpa-caja,34px); height:var(--tpa-caja,34px); flex:none; position:relative;
  border:1px solid var(--tpa-laton, #A8854A);
  display:flex; align-items:center; justify-content:center;
  transition:border-color 220ms var(--tpa-salida, cubic-bezier(.23,1,.32,1));
}
/* Filete interior: 6.25 % del lado (7 px sobre 112 px) */
.tpa-monograma::after{
  content:""; position:absolute; inset:calc(var(--tpa-caja,34px) * 0.0625);
  border:1px solid rgba(168,133,74,.32);
}
.tpa-monograma b{
  position:relative; z-index:2;
  font-family:var(--tpa-display, "Bodoni Moda", Didot, serif);
  font-weight:500;
  font-size:calc(var(--tpa-caja,34px) * 0.3928);   /* 44 px sobre 112 px */
  line-height:1;
  letter-spacing:0.04em;
  text-indent:0.04em;   /* compensa el tracking final: centrado óptico */
  color:var(--tpa-laton-alto, #D3B77E);
}
.tpa-marca:hover .tpa-monograma{ border-color:var(--tpa-laton-alto, #D3B77E) }

.tpa-nombre{
  font-family:var(--tpa-display, "Bodoni Moda", Didot, serif);
  font-weight:500; font-size:calc(var(--tpa-caja,34px) * 0.5);
  letter-spacing:0.13em; text-transform:uppercase; white-space:nowrap;
  color:var(--tpa-sobre, #E7E1CF);
}

/* --- Sobre papel --- */
.tpa-marca--papel .tpa-monograma{ border-color:var(--tpa-laton, #A8854A) }
.tpa-marca--papel .tpa-monograma b{ color:#8A6C38 }
.tpa-marca--papel .tpa-nombre{ color:var(--tpa-tinta, #141A23) }

/* --- Monocromo (grabado, bordado, una tinta) --- */
.tpa-marca--mono .tpa-monograma{ border-color:currentColor }
.tpa-marca--mono .tpa-monograma::after{ border-color:currentColor; opacity:.4 }
.tpa-marca--mono .tpa-monograma b,
.tpa-marca--mono .tpa-nombre{ color:currentColor }

/* --- Tamaños ---------------------------------------------------------------
   Sobre .tpa-marca escalan monograma y wordmark juntos.
   Sobre .tpa-monograma escalan sólo el monograma, para usarlo suelto.        */
.tpa-marca--16{  --tpa-caja:16px }
.tpa-marca--34{  --tpa-caja:34px }
.tpa-marca--112{ --tpa-caja:112px }

.tpa-monograma--16{  --tpa-caja:16px }   /* mínimo absoluto: favicon, firma de mail */
.tpa-monograma--34{  --tpa-caja:34px }   /* cabecera del sitio */
.tpa-monograma--112{ --tpa-caja:112px }  /* carátula, avatar, pieza impresa */

/* Por debajo de 20 px se cae el filete interior: a esa escala va favicon.svg,
   que es la versión sólida sin filete. */