:root { --fondo: #0E1A2B; --brillo: #1E3350; --panel: #17263B; --linea: #2F4360; --texto: #F3F0E8; --suave: #AEB7C4; --acento: #C8F03C; --sobre-acento: #0E1A2B; }

@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; }
.avatar { display: block; width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%; border: 1px solid var(--linea); }
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; }
.redes { display: flex; justify-content: center; margin-top: 12px; }
.red { display: inline-flex; align-items: center; gap: 7px; color: var(--texto); font-weight: 600; font-size: 14px; text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.red:hover { color: var(--acento); }

/* 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; }
.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;
  font: 400 15px/1 "Archivo Black", sans-serif; letter-spacing: .3px; background: var(--acento); color: var(--sobre-acento); }
h3 { font: 600 17px/1.25 "Inter", sans-serif; }
.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; }

@media (prefers-reduced-motion: reduce) { .boton { transition: none; } }