/* ==========================================================================
   tarjeta.css — la tarjeta de visita. UNA PANTALLA, y solo esta página.

   No la carga ninguna otra página del sitio, igual que `catalogo.css` solo la
   carga el catálogo.

   LA EXCEPCIÓN DEL ANCHO, DECLARADA PARA QUE NO PAREZCA UN OLVIDO. El sistema
   dice que ningún bloque de columna baja del 50% de la pantalla. Esa norma se
   escribió para bloques dentro de una página que SE RECORRE, con la escena
   ocupando la otra mitad. Aquí no hay columnas ni mitad para la escena: la
   escena está DETRÁS, no al lado, y la tarjeta es una pantalla única centrada.
   La excepción está recogida en el sistema de diseño con este mismo motivo, y
   no se hereda por parecido: una página de contenido no puede invocarla.

   SE DISEÑA PARA MÓVIL EN VERTICAL Y EN LA MANO. Las medidas de referencia son
   390×844 y 360×740, y manda la segunda. Escritorio es el caso secundario:
   ahí se centra la misma tarjeta y ya.
   ========================================================================== */

/* La página no se desplaza. Es el requisito, no un efecto: todo cabe o la
   tarjeta no sirve. `100dvh` es lo que descuenta de verdad la barra del
   navegador móvil, que es la que se come el sitio justo donde falta. */
html.pagina-tarjeta,
html.pagina-tarjeta body{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

.visita{
  position:relative; z-index:10;
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-5);
}

/* ── el tarjetón ──────────────────────────────────────────
   LA PIEZA LLEVA MATERIAL, Y NO ES ESTÉTICA: ES CONTRASTE MEDIDO. Flotando
   sobre la escena, el texto medía 4,46 el nombre, 3,04 el oficio y 2,60 la
   línea dorada, con una raíz iluminada pasando por detrás. El suelo del
   sistema es 4,5. Y la respuesta del propio sistema es la que se aplica: si es
   prosa flota, si es DATO O INTERFAZ tiene material. Una tarjeta de visita es
   dato.

   El valor de corcho NO ES NUEVO: es el de `.banda`, rgba(36,28,19,.58) con
   desenfoque de 8px, que es el de la pieza de más peso del sistema. Y esta lo
   es: es la página entera. A más peso de la pieza, más sólido el material.

   Al 58% la escena se sigue leyendo por detrás, que es justo para lo que la
   banda es más transparente que un panel opaco. */
.tarjeton{
  width:100%; max-width:34ch;
  display:flex; flex-direction:column;
  align-items:center; gap:var(--sp-5);
  padding:var(--sp-5);
  text-align:center;
  background:rgba(36,28,19,.58);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--linea);
  border-radius:var(--r-card);
  /* La misma sombra que `.caja`: es lo que separa el texto del fondo. */
  text-shadow:0 2px 30px rgba(0,0,0,.85), 0 0 60px rgba(0,0,0,.55);
}

/* ── el nombre ────────────────────────────────────────── */
.tarjeton h1{
  margin:0;
  max-width:none;           /* 22ch aquí partiría un nombre de dos palabras */
  font-size:var(--fs-2xl);  /* fijo y no fluido: la tarjeta no crece con la ventana */
}
.tarjeton .oficio{
  margin:var(--sp-2) auto 0;
  max-width:28ch;
  font-size:var(--fs-body);
  line-height:1.4;
  color:var(--hueso-70);
}

/* ── el panel del código ──────────────────────────────────
   OSCURO SOBRE CLARO AUNQUE LA PÁGINA SEA OSCURA. Un código claro sobre fondo
   oscuro es un código invertido: los lectores modernos suelen leerlo, los
   viejos y los de gama baja no, y el fallo ocurre justo delante del cliente.
   El panel hace además de tarjeta dentro de la pantalla, que es la metáfora. */
.tarjeton .panel-qr{
  background:var(--hueso);
  border-radius:var(--r-card);
  padding:var(--sp-3);
  line-height:0;                       /* sin hueco bajo el SVG */
  box-shadow:0 2px 40px rgba(0,0,0,.55);
}
.tarjeton .panel-qr svg{
  display:block;
  width:min(58vw, 40dvh, 300px);       /* el alto manda tanto como el ancho */
  height:auto;
}

/* ── los datos ────────────────────────────────────────────
   No bajan del texto corrido: tienen que leerse a un brazo de distancia. */
.tarjeton .datos{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-body);
}
/* `align-items:center` es lo que impide que el filete del enlace cruce la
   pantalla de lado a lado: estirado, deja de parecer un subrayado y pasa a
   parecer una línea de separación entre secciones, que el sistema prohíbe. */
.tarjeton .datos a{
  color:var(--hueso);
  border-bottom:1px solid var(--linea-alta);
  padding-bottom:2px;
}
.tarjeton .guardar{
  font-family:var(--etq); font-size:var(--fs-etq);
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--espiga);
}

/* ── pantallas cortas ─────────────────────────────────────
   Por debajo de 740px de alto se aprieta el aire, no el texto: el tamaño del
   texto es lo último que se toca, que para eso está la regla del mínimo. */
@media (max-height: 740px){
  .tarjeton{ gap:var(--sp-4); padding:var(--sp-4); }
  .tarjeton .panel-qr{ padding:var(--sp-2); }
}