/* Tarjeta digital · Asesor Lupita Aranda (Latinoamericana y PABS)
   Se apoya en /sistema.css (tokens, tipografías fijas, .boton, .enlace, .ceja, .tira, .monograma); aquí va solo lo suyo.

   La tarjeta presenta las dos marcas, así que su acento es la tinta: ni el bronce de una ni el azul de la otra.
   El dorado medido del logo (#9F8251) queda solo en filetes, separadores y anillos del monograma.
   Marfil de la tarjeta: #FFFEFB → #F7F2E9. Contraste sobre el tono más oscuro (#F7F2E9), medido:
   tinta 15.5:1 · tinta-2 8.6:1 · tinta-3 5.2:1. Blanco sobre tinta (botón): 17.3:1.

   La tarjeta física guarda la proporción 1.75:1 a cualquier ancho: todo lo de adentro se mide en cqi
   (porcentaje del ancho de la tarjeta), con piso en px para que nada baje de 14 px. */

html[data-marca="tarjeta"] {
  --acento: #1E1A16;
  --acento-hondo: #000000;
  --acento-claro: #9F8251;
  --detalle: #9F8251;

  --marfil: #FFFEFB;
  --marfil-2: #F7F2E9;
  --filete: rgba(159, 130, 81, .55);
  --radio-carta: 14px;
  --columna: 420px;
}

.lienzo { width: 100%; max-width: calc(var(--columna) + 2 * var(--gutter)); margin-inline: auto; padding: var(--e-5) var(--gutter) var(--e-8); }

/* Ceja centrada, con un filete a cada lado */
.lugar { justify-content: center; margin: 0 0 var(--e-5); }
.lugar::after, .qr__titulo::after { content: ''; width: 28px; height: 1px; flex: none; background: var(--acento-claro); }

/* ── La tarjeta física ─────────────────────────────────────────────── */
.carta {
  position: relative; container-type: inline-size;
  width: 100%; aspect-ratio: 7 / 4;
  border: 1px solid var(--linea); border-radius: var(--radio-carta);
  background: linear-gradient(155deg, var(--marfil) 0%, #FCF9F3 52%, var(--marfil-2) 100%);
  box-shadow: var(--sombra-carta);
}
.carta__cara {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center;
  column-gap: 5.4cqi; row-gap: 6.4cqi; padding: 0 8.4cqi;
}
/* Filete interior fino */
.carta__cara::before {
  content: ''; position: absolute; inset: 2.9cqi; pointer-events: none;
  border: 1px solid var(--filete); border-radius: max(3px, calc(var(--radio-carta) - 2.9cqi));
}
/* Lugar de la foto de Lupita: mientras llega, su monograma */
.carta__foto { width: 19cqi; aspect-ratio: 1; display: grid; place-items: center; }
.carta__foto .monograma { width: 100%; }
.carta__foto .mono-anillo { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.carta__foto .mono-anillo + .mono-anillo { stroke-width: .6px; }
.carta__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px var(--filete); }

.carta__datos { min-width: 0; }
.carta__nombre { display: flex; flex-direction: column; gap: 1.1cqi; }
/* «Asesor» en versalitas: 20 px con all-small-caps se ve como mayúsculas de 14 px y el texto sigue diciendo «Asesor» */
.carta__rol {
  font: 600 20px/1 var(--f-texto); font-size: max(20px, 5.7cqi);
  font-variant-caps: all-small-caps; letter-spacing: .1em; color: var(--tinta-3);
}
.carta__persona {
  font: 500 32px/1 var(--f-titulo); font-size: 9.7cqi;
  letter-spacing: -.005em; white-space: nowrap; color: var(--tinta);
}
.carta__tel {
  margin-top: 3.1cqi; font-size: 17px; font-size: max(15px, 4.9cqi); line-height: 1.2;
  letter-spacing: .045em; color: var(--tinta-2);
}
.carta__marcas { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 4.2cqi; }
.carta__logo { width: auto; height: 7.2cqi; }
.carta__logo--pabs { height: 6.2cqi; }
.carta__sep { width: 1px; height: 6.6cqi; background: var(--filete); }

/* ── Acciones ─────────────────────────────────────────────────────── */
.acciones { margin-top: var(--e-6); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-3); }
.acciones .boton { padding-inline: var(--e-4); }

.lista { margin-top: var(--e-6); border-top: 1px solid var(--linea); }
.fila {
  display: flex; align-items: center; gap: var(--e-4); width: 100%; min-height: 58px;
  margin: 0; padding: var(--e-2) var(--e-1) var(--e-2) 0; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0;
  background: transparent; color: var(--tinta); font: 400 var(--t-base)/1.3 var(--f-texto); text-align: left; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s var(--ease);
}
.fila:hover { background: rgba(255, 255, 255, .7); }
.fila:active { background: var(--piedra); }
.fila__etiqueta { flex: 1 1 auto; min-width: 0; }
.fila__logo { flex: none; width: 84px; height: auto; }
.fila__logo--pabs { width: 78px; margin-right: 6px; }
.fila__texto { flex: 1 1 auto; min-width: 0; font-size: var(--t-s); line-height: 1.3; color: var(--tinta-2); }
.fila__flecha { flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--tinta-3); transition: transform .2s var(--ease); }
.fila:hover .fila__flecha { transform: translateX(2px); }
html:not(.js) .solo-js { display: none; }

/* ── El QR: uno solo, hacia la tarjeta ─────────────────────────────── */
.qr { margin-top: var(--e-8); display: flex; flex-direction: column; align-items: center; text-align: center; }
.qr__titulo { justify-content: center; margin-bottom: var(--e-5); }
.qr__codigo {
  --celda: 5px;
  display: grid; place-items: center; min-width: 207px; min-height: 207px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-2); overflow: hidden;
}
.qr__codigo svg { width: calc(var(--modulos, 41) * var(--celda)); height: auto; shape-rendering: crispEdges; }
.qr__codigo svg path { fill: var(--tinta); }
.qr__respaldo { max-width: 205px; padding: var(--e-4); font-size: var(--t-s); line-height: 1.4; color: var(--tinta-2); overflow-wrap: anywhere; }
.qr__pie { margin-top: var(--e-4); font: italic 500 1.375rem/1.3 var(--f-titulo); color: var(--tinta); }
.qr__descarga { margin-top: var(--e-1); }
.descargar-tarjeta { margin-top: var(--e-7); padding-inline: var(--e-4); text-align: center; }

/* Aviso de «Link copiado»: siempre en la página (para lectores de pantalla), visible solo con texto */
.aviso {
  position: fixed; z-index: 20; left: 50%; bottom: calc(var(--e-5) + env(safe-area-inset-bottom, 0px));
  width: max-content; max-width: calc(100% - 2 * var(--gutter));
  padding: var(--e-3) var(--e-5); border-radius: 999px;
  background: var(--tinta); color: var(--blanco); font-size: var(--t-s); line-height: 1.35; text-align: center;
  box-shadow: 0 12px 28px -12px rgba(30, 26, 22, .55);
  opacity: 0; transform: translate(-50%, 8px); pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.aviso:not(:empty) { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.aviso__link { display: block; margin-top: 2px; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }

.solo-imagen { display: none; }

@media (min-width: 720px) {
  .lienzo { padding-top: var(--e-8); padding-bottom: var(--e-9); }
  .lugar { margin-bottom: var(--e-6); }
}

/* ── Modo imagen (tarjeta/?imagen): 360×640 que se capturan a 3× = 1080×1920 ── */
.modo-imagen body { width: 360px; height: 640px; margin: 0 auto; overflow: hidden; }
.modo-imagen .tira, .modo-imagen .acciones, .modo-imagen .lista, .modo-imagen .qr__titulo,
.modo-imagen .qr__descarga, .modo-imagen .descargar-tarjeta, .modo-imagen .aviso { display: none; }
.modo-imagen .lienzo { height: 100%; max-width: none; padding: 0 20px; display: flex; flex-direction: column; justify-content: center; }
.modo-imagen .lugar { margin-bottom: var(--e-5); }
.modo-imagen .solo-imagen { display: block; }
.servicios { margin-top: var(--e-5); font-size: var(--t-s); line-height: 1.5; text-align: center; color: var(--tinta-2); }
.servicios span { white-space: nowrap; }
.modo-imagen .qr { margin-top: var(--e-6); }
.modo-imagen .qr__codigo { --celda: 4px; min-width: 0; min-height: 0; }
.modo-imagen .qr__pie { margin-top: var(--e-3); font-size: 1.3125rem; }

@media (prefers-reduced-motion: reduce) {
  .fila, .fila__flecha, .aviso { transition: none; }
}
@media print {
  .tira, .acciones, .lista, .qr__descarga, .descargar-tarjeta, .aviso { display: none; }
  body { background: #fff; }
  .carta { box-shadow: none; }
}