/*
  Tarjeta digital STP — hoja compartida.

  Dirección: la tarjeta se lee como una FICHA TÉCNICA de STP, no como un perfil
  de red social. Es el mismo lenguaje de sus cotizaciones y recibos —rótulo en
  monoespaciada versalita sobre el dato en negrita, filetes finos, tinta navy—,
  así que quien la recibe reconoce a la misma empresa que le manda los documentos.

  De ahí salen las decisiones: papel claro en vez de banda oscura, rótulos que
  clasifican el dato en vez de iconos dentro de círculos, y una sola pieza de
  color —el filete verde bajo el nombre— haciendo de bloque de título.

  Pensada para el pulgar: una columna, objetivos táctiles de 56 px y nada que
  dependa de pasar el cursor por encima.
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --tinta:      #0D3773;
  --tinta-alt:  #16478C;
  --tinta-deep: #07204A;
  --verde:      #14704F;
  --verde-vivo: #1E9268;
  --papel:      #F1F2EE;
  --blanco:     #FFFFFF;
  --gris:       #55606B;
  --gris-claro: #8B949D;
  --linea:      #D9DDD5;

  --sombra: 0 1px 2px rgba(7,32,74,.05), 0 14px 38px rgba(7,32,74,.08);
  --radio: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--tinta-deep);
  background: var(--papel);
  line-height: 1.6;
  font-size: 16.5px;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem 3rem;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--verde); color: #fff; }
:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 3px; border-radius: 2px; }

/* Rótulo técnico: la voz de los documentos de STP. */
.rotulo {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-claro);
}

.tarjeta {
  width: 100%;
  max-width: 430px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  align-self: flex-start;
}

/* ─────────── Encabezado ─────────── */

.encabezado { padding: 1.6rem 1.4rem 1.5rem; }

.membrete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.logo {
  /* `flex: 0 0 auto` + alto automático: dentro de un contenedor flex la imagen
     se encogía y perdía su proporción. El archivo ya viene recortado al dibujo,
     sin el margen del lienzo cuadrado original. */
  flex: 0 0 auto;
  width: 152px;
  height: auto;
}

.membrete .rotulo { padding-top: .35rem; text-align: right; }

/* Bloque de título: filete verde + nombre, como el cajetín de un plano. */
.filete {
  width: 44px;
  height: 3px;
  background: var(--verde);
  margin-bottom: .9rem;
}

.nombre {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 1.72rem;
  line-height: 1.06;
  letter-spacing: -0.026em;
  font-weight: 700;
  color: var(--tinta);
  text-wrap: balance;
}

.cargo {
  margin-top: .5rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--verde);
}


/* ─────────── Datos ─────────── */

.datos { border-top: 1px solid var(--linea); }

.fila {
  display: flex;
  align-items: center;
  gap: .95rem;
  padding: .78rem 1.4rem;
  min-height: 60px;
  border-bottom: 1px solid var(--linea);
  transition: background .16s var(--ease);
}
.fila:active { background: var(--papel); }
@media (hover: hover) { .fila:hover { background: var(--papel); } }

.fila svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--gris-claro);
}
.fila--wa svg { color: var(--verde); }

.fila-txt { min-width: 0; }
.fila-val {
  display: block;
  font-weight: 600;
  font-size: .98rem;
  color: var(--tinta-deep);
  overflow-wrap: anywhere;
  line-height: 1.35;
  margin-top: .1rem;
}

/* ─────────── Acciones ─────────── */

.acciones {
  padding: 1.3rem 1.4rem;
  display: grid;
  gap: .55rem;
  border-bottom: 1px solid var(--linea);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 54px;
  padding: .8rem 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--tinta-deep);
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  width: 100%;
  transition: transform .1s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.btn--principal {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--blanco);
}
.btn--verde {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--blanco);
}
@media (hover: hover) {
  .btn:hover { border-color: var(--gris-claro); }
  .btn--principal:hover { background: var(--tinta-alt); border-color: var(--tinta-alt); }
  .btn--verde:hover { background: var(--verde-vivo); border-color: var(--verde-vivo); }
}

/* ─────────── QR ─────────── */

.qr-caja {
  padding: 1.5rem;
  display: flex;
  justify-content: center;
}
.qr {
  width: 132px;
  padding: .5rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 2px;
}

/* Entrada escalonada: el nombre primero, los datos después. Discreta. */
@media (prefers-reduced-motion: no-preference) {
  .encabezado, .datos, .acciones, .qr-caja {
    animation: surge .5s var(--ease) both;
  }
  .datos    { animation-delay: .06s; }
  .acciones { animation-delay: .12s; }
  .qr-caja  { animation-delay: .18s; }
}
@keyframes surge {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Aviso de "enlace copiado": solo aparece tras pulsar Compartir. */
.aviso {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(1rem);
  background: var(--tinta-deep);
  color: var(--blanco);
  padding: .7rem 1.1rem;
  border-radius: var(--radio);
  font-size: .88rem;
  box-shadow: var(--sombra);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 50;
}
.aviso.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}