Fundamentos
Radios y elevación
Esquinas suaves y sombras difusas en dos capas (ambiente + luz principal). La elevación comunica qué flota sobre qué, nunca decora.
Radios#
rounded-none
Fotos a sangre en móvil
rounded-xs
Kbd, chips de código
rounded-sm
Botones pequeños, tooltips
rounded-md
Botones, inputs, alertas
rounded-lg
Tarjetas y fotos de tarjeta
rounded-xl
Modales, popovers, mosaico de fotos
rounded-2xl
Bloques hero
rounded-full
Píldoras, avatares, buscador
Sombras#
shadow-xs
Separación mínima
0 1px 2px rgba(22,22,21,0.06)
shadow-sm
Botones flotantes, badges sobre foto
0 1px 2px rgba(22,22,21,0.08), 0 2px 6px rgba(22,22,21,0.04)
shadow-md
Hover de tarjetas, chips activos
0 2px 4px rgba(22,22,21,0.06), 0 6px 16px rgba(22,22,21,0.10)
shadow-lg
Tarjeta del mapa, segmento activo del buscador
0 4px 8px rgba(22,22,21,0.06), 0 12px 28px rgba(22,22,21,0.14)
shadow-xl
Modales, menús, toasts
0 8px 16px rgba(22,22,21,0.08), 0 24px 48px rgba(22,22,21,0.18)
shadow-search
Buscador en reposo
0 1px 2px rgba(22,22,21,0.08), 0 4px 12px rgba(22,22,21,0.06)