/* Las caras de las tarjetas. Todo se mide en `--u`, que vale un milímetro: 1mm
   en la hoja de impresión y los píxeles que toquen en el visor. `--w` y `--h`
   (sin unidad, en mm) los pone quien monta la cara, y `--sg` es el sangrado: lo
   que el fondo rebasa al corte (nada en el visor). Los colores del papel
   (`--papel`, `--tinta`, `--texto`, `--acento`, `--filete`, `--marca`, `--sobre`)
   y las fuentes (`--f-titulo`, `--f-texto`) los pone tarjeta.js con los de la
   marca; las fuentes se declaran en marcas/<marca>/fuentes.css. */

/* ───────────── la cara y sus piezas ───────────── */

.cara {
  --W: calc(var(--u) * var(--w));
  --H: calc(var(--u) * var(--h));
  --m: calc(var(--u) * 7);
  --cuerpo: 2.45;
  position: relative;
  width: var(--W);
  height: var(--H);
  color: var(--texto);
  font-family: var(--f-texto), "Avenir Next", sans-serif;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
.cara[data-forma="vertical"],
.cara[data-forma="cuadrada"] {
  --m: calc(var(--u) * 6);
}
.cara :where(p, ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cara svg {
  display: block;
  fill: currentColor;
  color: var(--marca);
}
/* El fondo cubre también el sangrado; el lienzo vuelve a las coordenadas del
   corte, para que lo que se sale del papel se coloque igual que lo demás. */
.cara__fondo {
  position: absolute;
  inset: calc(-1 * var(--sg, 0px));
  overflow: hidden;
  background: var(--papel);
}
.cara__lienzo {
  position: absolute;
  inset: var(--sg, 0px);
}
.cara__quien,
.cara__pie,
.cara__pila,
.cara__logo,
.cara__iso,
.cara__filete,
.cara__sitio {
  position: relative;
}

.cara__nombre {
  font: var(--p-titulo, 400) calc(var(--u) * 4.7) / 1.1 var(--f-titulo), Georgia, serif;
  letter-spacing: 0.012em;
  white-space: nowrap;
  color: var(--tinta);
}
.cara__puesto {
  margin-top: calc(var(--u) * 1.7);
  font-weight: 500;
  font-size: calc(var(--u) * 1.95);
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--acento);
}
.cara__senas,
.cara__plaza {
  font-size: calc(var(--u) * var(--cuerpo));
  line-height: 1.62;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cara__plaza {
  color: color-mix(in srgb, var(--texto) 62%, var(--papel));
}
.cara__filete {
  display: block;
  flex: none;
  background: var(--filete);
}
.cara[data-lado="reverso"] {
  display: grid;
  place-items: center;
}

/* Quién arriba y señas abajo, a la izquierda: lo comparten Clásica, Franja y
   Monograma. `--x` y `--y` mueven el arranque cuando una franja ocupa el borde. */
.cara:is([data-diseno="clasica"], [data-diseno="franja"], [data-diseno="monograma"]) .cara__quien {
  position: absolute;
  left: var(--x, var(--m));
  top: calc(var(--y, var(--m)) - var(--u) * 0.5);
}
.cara:is([data-diseno="clasica"], [data-diseno="franja"], [data-diseno="monograma"]) .cara__pie {
  position: absolute;
  left: var(--x, var(--m));
  right: var(--m);
  /* La caja de línea deja aire bajo la última letra: se descuenta para que el
     texto asiente sobre el margen. */
  bottom: calc(var(--m) - var(--u) * var(--cuerpo) * 0.39);
}
.cara[data-forma="vertical"] {
  --cuerpo: 2.05;
}
.cara[data-forma="vertical"] .cara__nombre {
  font-size: calc(var(--u) * 4.5);
}

/* ───────────── Clásica ───────────── */

.cara[data-diseno="clasica"] .cara__iso {
  position: absolute;
  right: var(--m);
  top: var(--m);
  height: calc(var(--u) * 11.5);
}
.cara[data-diseno="clasica"][data-forma="horizontal"] .cara__pie {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.cara[data-diseno="clasica"][data-forma="vertical"] .cara__iso {
  left: var(--m);
  right: auto;
  height: calc(var(--u) * 12.5);
}
.cara[data-diseno="clasica"][data-forma="vertical"] .cara__quien {
  top: calc(var(--u) * 33);
}
.cara[data-diseno="clasica"] .cara__logo {
  height: calc(var(--u) * 28);
}
.cara[data-diseno="clasica"][data-forma="vertical"] .cara__logo {
  height: calc(var(--u) * 31);
}
.cara[data-diseno="clasica"][data-forma="cuadrada"] .cara__logo {
  height: calc(var(--u) * 30);
}

/* ───────────── Eje ───────────── */

.cara[data-diseno="eje"][data-lado="frente"] {
  --cuerpo: 2.3;
  display: grid;
  place-items: center;
  text-align: center;
}
.cara[data-diseno="eje"][data-forma="vertical"] {
  --cuerpo: 2.05;
}
.cara[data-diseno="eje"] .cara__pila {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cara[data-diseno="eje"][data-forma="horizontal"] .cara__nombre {
  font-size: calc(var(--u) * 4.9);
}
.cara[data-diseno="eje"] .cara__puesto {
  /* El espaciado deja un hueco tras la última letra; se compensa para centrar. */
  text-indent: 0.26em;
}
.cara[data-diseno="eje"] .cara__filete {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 0.14);
  margin: calc(var(--u) * 3.4) 0 calc(var(--u) * 2.6);
}
.cara[data-diseno="eje"][data-forma="vertical"] .cara__filete {
  margin: calc(var(--u) * 6) 0 calc(var(--u) * 5.2);
}
.cara[data-diseno="eje"] .cara__logo {
  height: calc(var(--u) * 21);
}
.cara[data-diseno="eje"][data-forma="vertical"] .cara__logo {
  height: calc(var(--u) * 27);
}
.cara[data-diseno="eje"][data-forma="cuadrada"] .cara__logo {
  height: calc(var(--u) * 25);
}

/* ───────────── Filete ───────────── */

.cara[data-diseno="filete"][data-lado="frente"] {
  --cuerpo: 2.3;
  display: grid;
  grid-template-columns: calc(var(--W) * 0.31) auto 1fr;
  align-items: center;
}
.cara[data-diseno="filete"] .cara__iso {
  justify-self: center;
  height: calc(var(--u) * 17);
}
.cara[data-diseno="filete"][data-lado="frente"] .cara__filete {
  width: calc(var(--u) * 0.14);
  height: calc(var(--u) * 25);
}
.cara[data-diseno="filete"][data-lado="frente"] .cara__pila {
  padding-left: calc(var(--u) * 6.5);
}
.cara[data-diseno="filete"] .cara__nombre {
  font-size: calc(var(--u) * 4.4);
}
.cara[data-diseno="filete"] .cara__senas {
  margin-top: calc(var(--u) * 3.3);
}
.cara[data-diseno="filete"][data-lado="frente"]:is([data-forma="vertical"], [data-forma="cuadrada"]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cara[data-diseno="filete"][data-lado="frente"]:is([data-forma="vertical"], [data-forma="cuadrada"]) .cara__pila {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 calc(var(--m) - var(--u) * var(--cuerpo) * 0.39);
}
.cara[data-diseno="filete"]:is([data-forma="vertical"], [data-forma="cuadrada"]) .cara__puesto {
  text-indent: 0.26em;
}
.cara[data-diseno="filete"]:is([data-forma="vertical"], [data-forma="cuadrada"]) .cara__senas {
  margin-top: auto;
}
.cara[data-diseno="filete"][data-forma="vertical"] {
  --cuerpo: 2.05;
}
.cara[data-diseno="filete"][data-forma="vertical"] .cara__iso {
  margin-top: calc(var(--u) * 10);
  height: calc(var(--u) * 17);
}
.cara[data-diseno="filete"][data-lado="frente"][data-forma="vertical"] .cara__filete {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 0.14);
  margin: calc(var(--u) * 8) 0 calc(var(--u) * 7.5);
}
.cara[data-diseno="filete"][data-forma="cuadrada"] {
  --cuerpo: 2.2;
}
.cara[data-diseno="filete"][data-forma="cuadrada"] .cara__iso {
  margin-top: calc(var(--u) * 6.5);
  height: calc(var(--u) * 13);
}
.cara[data-diseno="filete"][data-lado="frente"][data-forma="cuadrada"] .cara__filete {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 0.14);
  margin: calc(var(--u) * 4.4) 0 calc(var(--u) * 4);
}
.cara[data-diseno="filete"][data-forma="cuadrada"] .cara__nombre {
  font-size: calc(var(--u) * 4.2);
}
/* El reverso: la casa, el filete y la dirección, en pila sobre el eje. */
.cara[data-diseno="filete"][data-lado="reverso"] .cara__pila {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cara[data-diseno="filete"] .cara__logo {
  width: calc(var(--u) * 34);
}
.cara[data-diseno="filete"][data-forma="vertical"] .cara__logo {
  width: calc(var(--u) * 30);
}
.cara[data-diseno="filete"][data-lado="reverso"] .cara__filete {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 0.14);
  margin: calc(var(--u) * 4.2) 0 calc(var(--u) * 3.6);
}
.cara__sitio {
  font-size: calc(var(--u) * 2.2);
  line-height: 1;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--tinta) 78%, var(--papel));
}

/* ───────────── Franja ───────────── */

.cara[data-diseno="franja"] {
  --b: calc(var(--W) * 0.3);
  --x: calc(var(--b) + var(--u) * 7);
  --cuerpo: 2.3;
}
.cara__franja {
  position: absolute;
  left: calc(-1 * var(--sg, 0px));
  top: calc(-1 * var(--sg, 0px));
  bottom: calc(-1 * var(--sg, 0px));
  width: calc(var(--b) + var(--sg, 0px));
  padding-left: var(--sg, 0px);
  display: grid;
  place-items: center;
  background: var(--papel);
}
.cara__franja .cara__iso {
  height: calc(var(--u) * 15);
}
.cara[data-diseno="franja"] .cara__nombre {
  font-size: calc(var(--u) * 4.5);
}
.cara[data-diseno="franja"]:is([data-forma="vertical"], [data-forma="cuadrada"]) {
  --b: calc(var(--H) * 0.3);
  --x: var(--m);
  --y: calc(var(--b) + var(--u) * 7);
}
.cara[data-diseno="franja"]:is([data-forma="vertical"], [data-forma="cuadrada"]) .cara__franja {
  bottom: auto;
  right: calc(-1 * var(--sg, 0px));
  width: auto;
  height: calc(var(--b) + var(--sg, 0px));
  padding: var(--sg, 0px) 0 0;
}
.cara[data-diseno="franja"][data-forma="vertical"] {
  --cuerpo: 2.05;
}
.cara[data-diseno="franja"][data-forma="cuadrada"] {
  --y: calc(var(--b) + var(--u) * 5.5);
}
.cara[data-diseno="franja"][data-forma="cuadrada"] .cara__iso {
  height: calc(var(--u) * 12);
}
.cara[data-diseno="franja"] .cara__logo {
  width: calc(var(--W) * 0.42);
}
.cara[data-diseno="franja"][data-forma="vertical"] .cara__logo {
  width: calc(var(--W) * 0.6);
}
.cara[data-diseno="franja"][data-forma="cuadrada"] .cara__logo {
  width: calc(var(--W) * 0.52);
}

/* ───────────── Monograma ───────────── */

.cara__sello {
  position: absolute;
  top: calc(var(--H) * -0.16);
  left: calc(var(--W) - var(--H) * 0.72);
  height: calc(var(--H) * 1.44);
}
.cara .cara__sello {
  color: var(--sobre);
}
/* En el reverso se sale por el otro lado: al voltear la tarjeta, continúa. */
.cara[data-lado="reverso"] .cara__sello {
  left: auto;
  right: calc(var(--W) - var(--H) * 0.72);
}
.cara[data-forma="vertical"] .cara__sello {
  top: calc(var(--H) * 0.3);
  left: calc(var(--W) * 0.4);
  height: calc(var(--H) * 0.9);
}
.cara[data-forma="vertical"][data-lado="reverso"] .cara__sello {
  left: auto;
  right: calc(var(--W) * 0.4);
}
.cara[data-forma="cuadrada"] .cara__sello {
  top: calc(var(--H) * -0.12);
  left: calc(var(--W) * 0.58);
  height: calc(var(--H) * 1.36);
}
.cara[data-forma="cuadrada"][data-lado="reverso"] .cara__sello {
  left: auto;
  right: calc(var(--W) * 0.58);
}
.cara[data-diseno="monograma"] .cara__logo {
  position: absolute;
  right: var(--m);
  bottom: var(--m);
  width: calc(var(--u) * 27);
}
.cara[data-diseno="monograma"][data-forma="vertical"] .cara__logo {
  top: var(--m);
  bottom: auto;
  width: calc(var(--u) * 24);
}