:root { --fondo: #0A0A0A; --brillo: #1F2A25; --panel: #151515; --linea: #2B2B2B; --texto: #FFFFFF; --suave: #A8A8A8; --acento: #FFFFFF; --sobre-acento: #0A0A0A; }
.funcionario { --acento: #2FE38A; --sobre-acento: #0A0F0D; }

@font-face { font-family: "Archivo Black"; src: url("fuentes/archivo-black-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 400; src: url("fuentes/inter-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 600; src: url("fuentes/inter-latin-600-normal.woff2") format("woff2"); font-display: swap; }

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--fondo); }
body {
  min-height: 100vh; min-height: 100dvh;
  color: var(--texto);
  background: radial-gradient(520px 300px at 50% -60px, var(--brillo), transparent 75%) no-repeat;
  font: 400 15px/1.45 "Inter", system-ui, sans-serif;
  padding: 48px 16px 28px;
}
main { width: 100%; max-width: 440px; margin: 0 auto; }

/* Cabecera */
.cabecera { text-align: center; margin-bottom: 36px; }
.avatares { display: flex; justify-content: center; margin-bottom: 18px; }
.avatares > * { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 0 0 4px var(--fondo); }
.avatares > * + * { margin-left: -14px; }
.ft-logo { display: grid; place-items: center; background: #0A0F0D; color: #2FE38A; border: 2px solid #2FE38A; font: 400 24px/1 "Archivo Black", sans-serif; }
h1 { font: 400 clamp(27px, 8vw, 32px)/1.1 "Archivo Black", sans-serif; letter-spacing: -.2px; }
.lema { color: var(--suave); font-size: 16px; margin: 10px auto 0; max-width: 32ch; text-wrap: balance; }

/* Secciones y tarjetas */
section + section { margin-top: 32px; }
h2 { color: var(--suave); font: 600 12px/1 "Inter", sans-serif; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 12px; }
.lista { display: flex; flex-direction: column; gap: 12px; }
.tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: 16px; padding: 16px; }
.fila { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.miniatura { flex: none; width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; object-fit: cover;
  font: 400 15px/1 "Archivo Black", sans-serif; letter-spacing: .3px; background: var(--acento); color: var(--sobre-acento); }
.miniatura.redonda { border-radius: 50%; }
.miniatura.contorno { background: var(--fondo); color: var(--acento); border: 2px solid var(--acento); font-size: 20px; }
h3 { font: 600 17px/1.25 "Inter", sans-serif; }
.arroba { color: var(--suave); font-size: 13px; margin-top: 1px; }
.detalle { color: var(--suave); margin-top: 4px; }

/* Botones */
.boton { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 16px; border-radius: 10px;
  font-weight: 600; text-align: center; text-decoration: none; background: var(--acento); color: var(--sobre-acento);
  transition: opacity .15s, transform .15s; }
a.boton:hover { opacity: .88; }
a.boton:active { transform: scale(.985); }
a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.boton.pronto { background: transparent; color: var(--suave); border: 1px dashed var(--suave); }
.icono { width: 18px; height: 18px; flex: none; }

footer { margin-top: 36px; text-align: center; color: var(--suave); font-size: 12.5px; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .boton { transition: none; } }