/* =========================================================
   vCard de la demo: réplica de la plantilla 011 «Doble cara»
   tal como la usa el motion PersonaVirtual (src/styles.css,
   .c011f / .c011b, tokens TPL011 de src/config.js), a la
   escala de la pantalla del teléfono simulado.
   La genera js/pantallas.js (anverso011 / reverso011).
   ========================================================= */
.vcard {
  /* Tokens TPL011 (claros: anverso; «-d»: reverso oscuro) */
  --t011-bg: #e6e9f0;
  --t011-dark: #c2c7d2;
  --t011-light: #ffffff;
  --t011-ink: #3a3f4b;
  --t011-bg-d: #24262c;
  --t011-dark-d: #191b1f;
  --t011-light-d: #2f323a;
  --t011-ink-d: #e7e9ef;
  --t011-side-name: #4a505d;
  --t011-side-role: #7b8290;
  --t011-role-d: #b9bec9;
  --t011-address: #a7adba;
  --t011-hundido: inset 3px 3px 6px var(--t011-dark-d), inset -3px -3px 6px var(--t011-light-d);
  --t011-relieve: 5px 5px 10px var(--t011-dark-d), -5px -5px 10px var(--t011-light-d);

  /* El giro de dos caras lo pone .giro (componentes.css). */
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: var(--esp-2);
}

.vcard[aria-pressed="true"] {
  cursor: default;
}

.vcard:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 3px;
  border-radius: 18px;
}

.vcard__cara {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(20, 24, 32, 0.22);
}

/* La vista de la vCard aprovecha todo el alto de la pantalla. */
.telefono__vista--vcard {
  overflow: hidden;
}

.telefono__vista--vcard .app__barra {
  margin-bottom: var(--esp-2);
}

.telefono__vista--vcard .contactos__dato {
  min-height: 2.6em;
  margin-top: var(--esp-2);
}

.telefono__vista--vcard .app__accion {
  margin-top: var(--esp-2);
}

/* ---------- Anverso ---------- */
.c011f {
  position: absolute;
  inset: 0;
  background: var(--t011-bg);
  color: var(--t011-ink);
}

.c011f__foto {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 84%;
  height: 88%;
}

.c011f__foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(6px 6px 10px rgba(140, 146, 160, 0.55));
}

/* Logo negro en la píldora neumórfica (fondo claro). */
.c011f__marca {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 40px;
  width: auto;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--t011-bg);
  box-shadow: 5px 5px 10px var(--t011-dark), -5px -5px 10px var(--t011-light);
}

.c011f__lateral {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.c011f__nombre {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t011-side-name);
  text-shadow: 1px 1px 1px var(--t011-light), -1px -1px 1px var(--t011-dark);
}

.c011f__cargo {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--t011-side-role);
}

/* Pista de la demo: la tarjeta tiene dos caras. */
.c011f__girar {
  position: absolute;
  top: 18px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.56rem;
  font-weight: 700;
  color: var(--t011-ink);
}

.c011f__girar svg {
  width: 11px;
  height: 11px;
}

/* ---------- Reverso ---------- */
.c011b {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.36rem;
  padding: 0.75rem 0.8rem 0.7rem;
  overflow-y: auto;
  background: var(--t011-bg-d);
  color: var(--t011-ink-d);
  scrollbar-width: none;
}

.c011b__nombre {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  color: var(--t011-ink-d);
  text-shadow: 2px 2px 4px var(--t011-dark-d), -1px -1px 3px var(--t011-light-d);
}

.c011b__cargo {
  padding: 0.25rem 0.9rem;
  border-radius: var(--radio-pill);
  box-shadow: var(--t011-hundido);
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: lowercase;
  color: var(--t011-role-d);
}

.c011b__servicios {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c011b__servicios li {
  padding: 0.2rem 0.5rem;
  border-radius: var(--radio-pill);
  box-shadow: var(--t011-hundido);
  font-size: 0.52rem;
}

.c011b__detalles {
  display: grid;
  gap: 0.28rem;
  width: 100%;
}

.c011b__detalle {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: center;
  gap: 0.55rem;
  padding: 0.28rem 0.7rem;
  border: 0;
  border-radius: 11px;
  background: var(--t011-bg-d);
  box-shadow: var(--t011-hundido);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--t011-ink-d);
  transition: box-shadow var(--t-rapida);
}

.c011b__detalle svg {
  width: 14px;
  height: 14px;
}

.c011b__detalle span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c011b__detalle b {
  font-weight: 700;
  color: var(--color-blanco);
}

/* Enlace ya usado por el visitante: en relieve y con el teal de la marca. */
.c011b__detalle[aria-pressed="true"] {
  box-shadow: var(--t011-relieve), inset 0 0 0 1px var(--color-acento-vivo);
}

.c011b__qr {
  display: block;
  padding: 6px;
  border-radius: 12px;
  background: var(--color-blanco);
  box-shadow: var(--t011-relieve);
  line-height: 0;
}

.c011b__qr img {
  width: 52px;
  height: 52px;
}

.c011b__direccion {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t011-address);
}