/* Tarjeta · página pública (mobile-first, sin JavaScript) */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-latin-variable.woff2) format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/poppins-latin-600.woff2) format('woff2');
}
:root {
  /* Paleta Conexiala (igual que Monito) */
  color-scheme: dark;
  --fondo: #071525;
  --superficie: #0B1D3A;
  --superficie-2: #132A44;
  --texto: #F1F5F9;
  --sutil: #94A3B8;
  --borde: #263B50;
  --primario: #2563EB;
  --acento: #06C6E0;
  --gradiente: linear-gradient(135deg, #2563EB 0%, #06C6E0 100%);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: radial-gradient(ellipse at top, var(--superficie) 0%, var(--fondo) 60%) var(--fondo);
  color: var(--texto); font: 16px/1.5 'Inter', 'Segoe UI', system-ui, sans-serif;
  display: flex; justify-content: center; padding: 40px 16px;
}
.tarjeta { width: 100%; max-width: 420px; text-align: center; }
.foto {
  width: 160px; height: 160px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 20px;
  border: 3px solid transparent; background: var(--gradiente) border-box;
}
.iniciales {
  display: flex; align-items: center; justify-content: center;
  font: 600 56px/1 'Poppins', 'Segoe UI', system-ui, sans-serif; color: #fff;
}
h1 { font: 600 1.75rem/1.2 'Poppins', 'Segoe UI', system-ui, sans-serif; margin: 0 0 6px; overflow-wrap: anywhere; }
.subtitulo { color: var(--sutil); margin: 0 0 28px; }
.botones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.boton, .guardar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px; border-radius: 12px; text-decoration: none; font-weight: 600;
}
.boton { background: var(--superficie); border: 1px solid var(--borde); color: var(--texto); }
.boton:hover, .boton:focus-visible { background: var(--superficie-2); }
.boton svg { color: var(--acento); flex: none; }
.guardar { background: var(--gradiente); color: #fff; font-size: 1.05rem; margin-bottom: 28px; }
.guardar:hover, .guardar:focus-visible { filter: brightness(1.08); }
.redes { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.redes a {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--superficie); border: 1px solid var(--borde); color: var(--texto);
}
.redes a:hover, .redes a:focus-visible { color: var(--acento); }
a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.aviso { padding-top: 15vh; }
.aviso p { color: var(--sutil); }
.isotipo { display: block; width: 120px; height: auto; margin: 0 auto 20px; }
.firma-conexiala {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 36px;
  color: var(--sutil); font-size: .8rem; text-decoration: none; opacity: .8;
}
.firma-conexiala:hover, .firma-conexiala:focus-visible { opacity: 1; color: var(--texto); }
.logo-marca { display: block; height: 40px; width: auto; max-width: 200px; margin: 36px auto 0; object-fit: contain; }
.logo-marca + .firma-conexiala { margin-top: 12px; }